--- extends: _layouts.markdown title: "Flexbox" ---
Flexbox
# Align Content
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.

Start Default

Use `.content-start` to pack lines in a flex container against the start of the main axis: @component('_partials.code-sample')
1
2
3
4
5
@endcomponent ## Center Use `.content-center` to pack lines in a flex container in the center of the main axis: @component('_partials.code-sample')
1
2
3
4
5
@endcomponent ## End Use `.content-end` to pack lines in a flex container against the end of the main axis: @component('_partials.code-sample')
1
2
3
4
5
@endcomponent ## Space between Use `.content-between` to distribute lines in a flex container such that there is an equal amount of space between each line: @component('_partials.code-sample')
1
2
3
4
5
@endcomponent ## Space around Use `.content-around` to distribute lines in a flex container such that there is an equal amount of space around each line: @component('_partials.code-sample')
1
2
3
4
5
@endcomponent