--- extends: _layouts.markdown title: "Flexbox" --- # Flexbox
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. ## Display ### Flex Use `.flex` to create a block-level flex container: @component('_partials.code-sample')
1
2
3
@endcomponent ### Inline flex Use `.inline-flex` to create an inline flex container: @component('_partials.code-sample')
1
2
3
@endcomponent --- ## Flex Direction ### Row Use `.flex-row` to position flex items horizontally in the same direction as text *(this is also the default behavior)*: @component('_partials.code-sample')
1
2
3
@endcomponent ### Row reversed Use `.flex-row-reverse` to position flex items horizontally in the opposite direction: @component('_partials.code-sample')
1
2
3
@endcomponent ### Column Use `.flex-col` to position flex items vertically: @component('_partials.code-sample')
1
2
3
@endcomponent ### Column reversed Use `.flex-col-reverse` to position flex items vertically in the opposite direction: @component('_partials.code-sample')
1
2
3
@endcomponent --- ## Flex Wrapping ### No wrapping Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the default behavior)*: @component('_partials.code-sample')
1
2
3
@endcomponent ### Wrap normally Use `.flex-wrap` to allow flex items to wrap: @component('_partials.code-sample')
1
2
3
@endcomponent ### Wrap reversed Use `.flex-wrap-reverse` to wrap flex items in the reverse direction: @component('_partials.code-sample')
1
2
3
@endcomponent --- ## Justify Content ### Start Use `.justify-start` to justify items against the start of the flex container's main axis *(this is also the default behavior)*: @component('_partials.code-sample')
1
2
3
@endcomponent ### End Use `.justify-end` to justify items against the end of the flex container's main axis: @component('_partials.code-sample')
1
2
3
@endcomponent ### Center Use `.justify-center` to justify items along the center of the flex container's main axis: @component('_partials.code-sample')
1
2
3
@endcomponent ### Space between Use `.justify-between` to justify items along the flex container's main axis such that there is an equal amount of space between each item: @component('_partials.code-sample')
1
2
3
@endcomponent ### Space around Use `.justify-around` to justify items along the flex container's main axis such that there is an equal amount of space around each item: @component('_partials.code-sample')
1
2
3
@endcomponent --- ## Align Items ### Stretch Use `.items-stretch` to stretch items to fill the flex container's cross axis *(this is also the default behavior)*: @component('_partials.code-sample')
1
2
3
@endcomponent ### Start Use `.items-start` to align items to the start of the flex container's cross axis: @component('_partials.code-sample')
1
2
3
@endcomponent ### End Use `.items-end` to align items to the end of the flex container's cross axis: @component('_partials.code-sample')
1
2
3
@endcomponent ### Center Use `.items-center` to align items along the center of the flex container's cross axis: @component('_partials.code-sample')
1
2
3
@endcomponent ### Baseline Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align: @component('_partials.code-sample')
1
2
3
@endcomponent --- ## Align Content ### Start Use `.content-start` to pack lines in a flex container against the start of the main axis *(this is also the default behavior)*: @component('_partials.code-sample')
1
2
3
4
5
@endcomponent ### Center Use `.content-center` to pack lines in a flex container in the center of the main axis: @component('_partials.code-sample')
1
2
3
4
5
@endcomponent ### End Use `.content-end` to pack lines in a flex container against the end of the main axis: @component('_partials.code-sample')
1
2
3
4
5
@endcomponent ### Space between Use `.content-between` to distribute lines in a flex container such that there is an equal amount of space between each line: @component('_partials.code-sample')
1
2
3
4
5
@endcomponent ### Space around Use `.content-around` to distribute lines in a flex container such that there is an equal amount of space around each line: @component('_partials.code-sample')
1
2
3
4
5
@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 ### Initial Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account it's initial size *(this is also the default behavior)*: @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 Grow ### 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 --- ## Flex shrink ### 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 --- ## Align Self ### Start Use `.self-start` to align an item to the start of the flex container's cross axis, despite the container's `align-items` value: @component('_partials.code-sample')
1
2
3
@endcomponent ### End Use `.self-end` to align an item to the end of the flex container's cross axis, despite the container's `align-items` value: @component('_partials.code-sample')
1
2
3
@endcomponent ### Center Use `.self-center` to align an item along the center of the flex container's cross axis, despite the container's `align-items` value: @component('_partials.code-sample')
1
2
3
@endcomponent ### Stretch Use `.self-stretch` to stretch an item to fill the flex container's cross axis, despite the container's `align-items` value: @component('_partials.code-sample')
1
2
3
@endcomponent