Tailwind Flex Grow

The tailwind flex grow utility class allows you to control the growth factor of flex items within a flex container. With Tailwind's flex-grow class, you can easily adjust the proportion of available space that flex items occupy along the main axis.

Applying Tailwind Flex Grow

To apply tailwind flex grow to a flex item, you can use the flex-grow-{value} utility class, where {value} represents the desired growth factor. The {value} can range from 0 to a positive integer, determining the proportion of available space the flex item should occupy.

<div class="flex">
  <div>
    <div class="flex-grow-0">Item 1</div>
    <div class="flex-grow">Item 2</div>
  </div>
</div>

Preview

Responsive Tailwind Flex Grow

Tailwind CSS allows you to apply flex grow responsively at different breakpoints. To use responsive tailwind flex grow classes, you can append the breakpoint prefix to the flex grow class. For example, md:flex-grow-2 applies a flex grow value of 2 starting from the medium breakpoint and above.

<div class="flex">
  <div class="flex-grow md:flex-grow-0">Item 1</div>
  <div class="flex-grow md:flex-grow">Item 2</div>
  <div class="flex-grow-2 md:flex-grow-4">Item 3</div>
</div>

In the above example, the flex grow behavior of the items is modified based on the breakpoints. The first item has a flex grow value of 0 by default, but starting from the medium breakpoint and above (md:flex-grow-0), it does not grow. The second item has a flex grow value of 1 by default, but starting from the medium breakpoint and above (md:flex-grow), it grows. The third item has a flex grow value of 2 by default, but starting from the medium breakpoint and above (md:flex-grow-4), it grows at a higher rate.

Tailwind Flex Grow Class Table

Windframe Tailwind blocks

footer