tailwindcss/docs/source/docs/flexbox-flex-grow-shrink.blade.md

extends	title
_layouts.documentation	Flex, Grow, & Shrink - Flexbox

Flex, Grow, & Shrink

Utilities for controlling how flex items grow and shrink.

@include('_partials.feature-badges', [ 'responsive' => true, 'customizable' => false, 'hover' => false, 'focus' => false ])

Class	Properties	Description
.flex-initial	flex: initial;	Allow a flex item to shrink but not grow, taking into account its initial size.
.flex-1	flex: 1;	Allow a flex item to grow and shrink as needed, ignoring its initial size.
.flex-auto	flex: auto;	Allow a flex item to grow and shrink, taking into account its initial size.
.flex-none	flex: none;	Prevent a flex item from growing or shrinking.
.flex-grow	flex-grow: 1;	Allow a flex item to grow to fill any available space.
.flex-shrink	flex-shrink: 1;	Allow a flex item to shrink if needed.
.flex-no-grow	flex-grow: 0;	Prevent a flex item from growing.
.flex-no-shrink	flex-shrink: 0;	Prevent a flex item from shrinking.

Initial Default

Use .flex-initial to allow a flex item to shrink but not grow, taking into account its initial size:

@component('_partials.code-sample')

Items don't grow when there's extra space

Short

Medium length

Items shrink if possible when needed

Short

Medium length

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem

@slot('code')

Short

Medium length

Short

Medium length

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem

@endslot @endcomponent

Flex 1

Use .flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:

@component('_partials.code-sample')

Default behavior

Short

Medium length

Significantly larger amount of content

With .flex-1

Short

Medium length

Significantly larger amount of content

@slot('code')

Short

Medium length

Significantly larger amount of content

@endslot @endcomponent

Auto

Use .flex-auto to allow a flex item to grow and shrink, taking into account its initial size:

@component('_partials.code-sample')

Default behavior

Short

Medium length

Significantly larger amount of content

With .flex-auto

Short

Medium length

Significantly larger amount of content

@slot('code')

Short

Medium length

Significantly larger amount of content

@endslot @endcomponent

None

Use .flex-none to prevent a flex item from growing or shrinking:

@component('_partials.code-sample')

Item that can grow or shrink if needed

Item that cannot grow or shrink

Item that can grow or shrink if needed

@endcomponent

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-no-grow to prevent a flex item from growing:

@component('_partials.code-sample')

Will grow

Will not grow

Will grow

@endcomponent

Shrink

Use .flex-shrink to allow a flex item to shrink if needed:

@component('_partials.code-sample')

Longer content that cannot flex

Item that will shrink even if it causes the content to wrap

Longer content that cannot flex

@endcomponent

Don't shrink

Use .flex-no-shrink to prevent a flex item from shrinking:

@component('_partials.code-sample')

Item that can shrink if needed

Item that cannot shrink below its initial size

Item that can shrink if needed

@endcomponent

Responsive

To control how a flex item grows or shrinks at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:flex-no-shrink to apply the flex-no-shrink 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')

Item that cannot grow or shrink

@endslot @endcomponent