Flex Grow

    Use to allow a flex item to grow to fill any available space:

    Use .flex-grow-0 to prevent a flex item from growing:

    Flex Grow - 图2

    1. <div class="flex bg-gray-200">
    2.   <div class="flex-grow text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    3.     Will grow
    4.   <div class="flex-grow-0 text-gray-800 text-center bg-gray-500 px-4 py-2 m-2">
    5.     Will not grow
    6.   </div>
    7.   <div class="flex-grow text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    8.     Will grow
    9.   </div>
    10. </div>

    To control how a flex item grows at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use to apply the flex-grow-0 utility at only medium screen sizes and above.

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

    Flex Grow - 图4

    sm

    md

    Flex Grow - 图6

    lg

    Item that can grow or shrink if needed

    Responsive flex item

    Item that can grow or shrink if needed

    By default Tailwind provides two flex-grow utilities. You change, add, or remove these by editing the theme.flexGrow section of your Tailwind config.

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     theme: {
    4.       flexGrow: {
    5. -       default: 1,
    6. +       default: 2,
    7. +       '1': 1,
    8.       }
    9.     }

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

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

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

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     corePlugins: {
    4.       // ...
    5. +     flexGrow: false,
    6.   }

      Flex Shrink →