| extends |
title |
category |
| _layouts.markdown |
Flex, Grow, & Shrink - Flexbox |
Flexbox |
Flex, Grow, & Shrink
Utilities for controlling how flex items grow and shrink.
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
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
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
Responsive
To control how a flex item grows or shrinks at a specific breakpoint, add a {breakpoint}: 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
