--- extends: _layouts.markdown title: "Direction - Flexbox" category: "Flexbox" --- # Flex Direction
Utilities for controlling the direction of flex items.
@include('_partials.feature-badges', [ 'responsive' => true, 'customizable' => false, 'hover' => false, 'focus' => false ])
Class Properties Description
.flex-row flex-direction: row; Position flex items in the normal horizontal direction.
.flex-row-reverse flex-direction: row-reverse; Position flex items in the reverse horizontal direction.
.flex-col flex-direction: column; Position flex items vertically.
.flex-col-reverse flex-direction: column-reverse; Position flex items vertically in the reverse direction.
### Row Default Use `.flex-row` to position flex items horizontally in the same direction as text: @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 ## Responsive To apply a flex direction utility only at a specific breakpoint, add a `{breakpoint}:` prefix to the existing class name. For example, adding the class `md:flex-row` to an element would apply the `flex-row` utility at 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')
@endslot @endcomponent