Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

flex-direction

Utilities for controlling the direction of flex items.

Class	Styles
`flex-row`	`flex-direction: row;`
`flex-row-reverse`	`flex-direction: row-reverse;`
`flex-col`	`flex-direction: column;`
`flex-col-reverse`	`flex-direction: column-reverse;`

Examples

Use flex-row to position flex items horizontally in the same direction as text:

<div class="flex flex-row ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

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

<div class="**flex-row-reverse** flex ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Use flex-col to position flex items vertically:

<div class="**flex-col** flex ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

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

<div class="**flex-col-reverse** flex ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Prefix a flex direction utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="flex flex-col md:flex-row">  <!-- ... --></div>

Learn more about using variants in the variants documentation.