---
extends: _layouts.markdown
title: "Flexbox"
---
Flexbox
# Align Self
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.
Auto Default
Use `.self-auto` to align an item based on the flex container's `align-items` value:
@component('_partials.code-sample')
@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')
@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')
@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')
@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')
@endcomponent