Flexbox & Grid

Flex Direction

Utilities for controlling the direction of flex items.

Quick reference

Class	Description
flex-row	flex-direction: row
flex-row-reverse	flex-direction: row-reverse
flex-col	flex-direction: column
flex-col-reverse	flex-direction: column-reverse

Basic usage

Row

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

01

02

03

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

Row Reverse

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

01

02

03

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

Column

Use flex-col to position flex items vertically.

01

02

03

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

Column reverse

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

01

02

03

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

Applying conditionally

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:flex-row to apply the flex-row utility at only medium screen sizes and above.

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