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>