--- extends: _layouts.markdown title: "Align Items - Flexbox" category: "Flexbox" --- # Align Items
Utilities for controlling how flex items are positioned along a container's cross axis.
Usage Responsive
### 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 ## Responsive To control the alignment of flex items at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:items-center` to apply the `items-center` 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')
1
2
3
@endslot @slot('sm')
1
2
3
@endslot @slot('md')
1
2
3
@endslot @slot('lg')
1
2
3
@endslot @slot('xl')
1
2
3
@endslot @slot('code')
@endslot @endcomponent