tailwindcss/docs/source/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.

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