Flex grow

Utilities for controlling how flex items grow


Class reference

ClassProperties
flex-growflex-grow: 1;
flex-grow-0flex-grow: 0;

# Grow

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

<div class="flex ...">
<div class="flex-none w-16 h-16 ...">
<!-- This item will not grow -->
</div>
<div class="flex-grow h-16 ...">
<!-- This item will grow -->
</div>
<div class="flex-none w-16 h-16 ...">
<!-- This item will not grow -->
</div>
</div>

# Don’t grow

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

<div class="flex ...">
<div class="flex-grow h-16 ...">
<!-- This item will grow -->
</div>
<div class="flex-grow-0 h-16 ...">
<!-- This item will not grow -->
</div>
<div class="flex-grow h-16 ...">
<!-- This item will grow -->
</div>
</div>

# Responsive

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

<div class="flex ...">
<!-- ... -->
<div class="flex-grow md:flex-grow-0 ...">
Responsive flex item
</div>
<!-- ... -->
</div>

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