tailwindcss/docs/source/styles/flexbox.blade.md

extends	title
_layouts.markdown	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.

Flex Containers

Use .flex to create a block-level flex container:

@component('_partials.code-sample')

1

2

3

@endcomponent

Use .inline-flex to create an inline flex container:

@component('_partials.code-sample')

1

2

3

@endcomponent

Flex Direction

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

Use .flex-row-reverse to position flex items horizontally in the opposite direction:

@component('_partials.code-sample')

1

2

3

@endcomponent

Use .flex-col to position flex items vertically:

@component('_partials.code-sample')

1

2

3

@endcomponent

Use .flex-col-reverse to position flex items vertically in the opposite direction:

@component('_partials.code-sample')

1

2

3

@endcomponent

Flex Wrap

Use .flex-nowrap to prevent flex items from wrapping (this is also the default behavior):

@component('_partials.code-sample')

1

2

3

@endcomponent

Use .flex-wrap to allow flex items to wrap:

@component('_partials.code-sample')

1

2

3

@endcomponent

Use .flex-wrap-reverse to wrap flex items in the reverse direction:

@component('_partials.code-sample')

1

2

3

@endcomponent

Justify Content

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

Use .justify-end to justify items against the end of the flex container's main axis:

@component('_partials.code-sample')

1

2

3

@endcomponent

Use .justify-center to justify items along the center of the flex container's main axis:

@component('_partials.code-sample')

1

2

3

@endcomponent

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

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

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

Use .items-start to align items to the start of the flex container's cross axis:

@component('_partials.code-sample')

1

2

3

@endcomponent

Use .items-end to align items to the end of the flex container's cross axis:

@component('_partials.code-sample')

1

2

3

@endcomponent

Use .items-center to align items along the center of the flex container's cross axis:

@component('_partials.code-sample')

1

2

3

@endcomponent

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

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

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

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

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

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 Items

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

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

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

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

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

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

@component('_partials.code-sample')

Will grow

Will not grow

Will grow

@endcomponent

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

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

@component('_partials.code-sample')

Item that can shrink if needed

Item that cannot grow or shrink

Item that can shrink if needed

@endcomponent

Align Self

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

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

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

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