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

extends	title
_layouts.markdown	Flexbox

Flexbox

Flex, Grow, & Shrink

Usage Responsive Customizing

Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.

Initial Default

Use .flex-initial to allow a flex item to shrink but not grow, taking into account it's 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 it's 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 it's 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 it's initial size

Item that can shrink if needed

@endcomponent