--- extends: _layouts.markdown title: "Align Items - Flexbox" category: "Flexbox" --- # Align Self
Utilities for controlling how an individual flex item is positioned along its container's cross axis.
Responsive
### Auto Default Use `.self-auto` to align an item based on the flex container's `align-items` value: @component('_partials.code-sample')
1
2
3
@endcomponent ### 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 ### 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 ### 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 ### 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 ## Responsive To control the alignment of a flex item at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:self-end` to apply the `self-end` 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')
2
@endslot @endcomponent