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

extends	title
_layouts.markdown	Flexbox

Flexbox

Align Self

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.

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