tailwindcss/docs/source/styles/flexbox/align-items.blade.md

extends	title
_layouts.markdown	Flexbox

Flexbox

Align Items

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.

Stretch Default

Use .items-stretch to stretch items to fill the flex container's cross axis:

@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

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

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

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