---
extends: _layouts.markdown
title: "Flexbox"
---
Flexbox
# Flex Direction
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 Default
Use `.flex-row` to position flex items horizontally in the same direction as text:
@component('_partials.code-sample')
@endcomponent
## Row reversed
Use `.flex-row-reverse` to position flex items horizontally in the opposite direction:
@component('_partials.code-sample')
@endcomponent
## Column
Use `.flex-col` to position flex items vertically:
@component('_partials.code-sample')
@endcomponent
## Column reversed
Use `.flex-col-reverse` to position flex items vertically in the opposite direction:
@component('_partials.code-sample')
@endcomponent