关于前端:tailwindcss-系列-Flex-Wrap

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>