Flex Grow

Utilities for controlling how flex items grow.

@include('_partials.class-table', [ 'rows' => [ [ '.flex-grow', 'flex-grow: 1;', "Allow a flex item to grow to fill any available space.", ], [ '.flex-grow-0', 'flex-grow: 0;', "Prevent a flex item from growing.", ], ] ])

Grow

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

@component('_partials.code-sample')

Content that cannot flex
Item that will grow
Content that cannot flex
@endcomponent

Don't grow

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

@component('_partials.code-sample')

Will grow
Will not grow
Will grow
@endcomponent

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.

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

@component('_partials.responsive-code-sample') @slot('none')

Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
@endslot @slot('sm')
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
@endslot @slot('md')
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
@endslot @slot('lg')
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
@endslot @slot('xl')
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
@endslot @slot('code')
Responsive flex item
@endslot @endcomponent

Customizing

Grow Values

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

@component('_partials.customized-config', ['key' => 'theme.flexGrow']) '0': 0,

  • default: 1,
  • default: 2,
  • '1': 1, @endcomponent

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'flex grow', 'property' => 'flexGrow', ], 'variants' => [ 'responsive', ], ])

Tailwind UI is now in early access!

Learn more