共计 1024 个字符，预计需要花费 3 分钟才能阅读完成。
flex wrap 三种状况 don’t wrap,wrap normally,wrap reserved
don’t wrap
成果
代码
<div class="flex flex-no-wrap bg-gray-200">
<div class="w-2/5 flex-none p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
</div>
</div>wrap normally
成果
代码
<div class="flex flex-wrap bg-gray-200">
<div class="w-2/5 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
</div>
<div class="w-2/5 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
</div>
<div class="w-2/5 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
</div>
</div>wrap reserved
成果
代码
<div class="flex flex-wrap-reverse bg-gray-200">
<div class="w-2/5 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
</div>
<div class="w-2/5 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
</div>
<div class="w-2/5 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
</div>
</div>正文完