--- extends: _layouts.markdown title: "Direction - Flexbox" category: "Flexbox" --- # Flex Direction
Utilities for controlling the direction of flex items.
Usage Responsive
### 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