Tailwind CSS 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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.