Flex Direction

    Row

    Use to position flex items horizontally in the same direction as text:

    Use .flex-row-reverse to position flex items horizontally in the opposite direction:

    Flex Direction - 图2

    1. <div class="flex flex-row-reverse bg-gray-200">
    2.   <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
    3.   <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
    4.   <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
    5. </div>

    Column

    Use .flex-col to position flex items vertically:

    Use .flex-col-reverse to position flex items vertically in the opposite direction:

    Flex Direction - 图4

    1. <div class="flex flex-col-reverse bg-gray-200">
    3.   <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
    4. </div>

    Responsive

    For more information about Tailwind’s responsive design features, check out the documentation.

    all

    Flex Direction - 图6

    sm

    md

    Flex Direction - 图8

    xl

    1

    2

    3

    By default, only responsive variants are generated for flex-direction utilities.

    You can control which variants are generated for the flex-direction utilities by modifying the flexDirection property in the variants section of your tailwind.config.js file.

    For example, this config will also generate hover and focus variants:

    2.   module.exports = {
    3.     variants: {
    4.       // ...
    5. -     flexDirection: ['responsive'],
    6. +     flexDirection: ['responsive', 'hover', 'focus'],
    7.     }

    Disabling

      Flex Wrap →