tailwindcss/docs/source/styles/flexbox/direction.blade.md

extends	title
_layouts.markdown	Flexbox

Flexbox

Flex Direction

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.

Row

Use .flex-row to position flex items horizontally in the same direction as text (this is also the default behavior):

@component('_partials.code-sample')

1

2

3

@endcomponent

Row reversed

Use .flex-row-reverse to position flex items horizontally in the opposite direction:

@component('_partials.code-sample')

1

2

3

@endcomponent

Column

Use .flex-col to position flex items vertically:

@component('_partials.code-sample')

1

2

3

@endcomponent

Column reversed

Use .flex-col-reverse to position flex items vertically in the opposite direction:

@component('_partials.code-sample')

1

2

3

@endcomponent