Flex Direction

Control flex direction with row, column, and reverse direction utilities.

Overview

Direction utilities control the main axis of a flex container. Add .flex first, then apply one of the direction helpers to the same parent.

Class	CSS
.flex-row	flex-direction: row;
.flex-col	flex-direction: column;
.flex-row-reverse	flex-direction: row-reverse;
.flex-col-reverse	flex-direction: column-reverse;

Row

.flex-row lays items out horizontally from left to right. This is the default direction for flex containers and is useful for navigation bars, button groups, and inline card rows.

<div class="elementor-element flex flex-row gap-4">
  <div class="padding-4 background-secondary text-white rounded">
    01
  </div>
  <div class="padding-4 background-secondary text-white rounded">
    02
  </div>
  <div class="padding-4 background-secondary text-white rounded">
    03
  </div>
</div>

Row Reverse

.flex-row-reverse reverses the horizontal direction so items flow from right to left. The DOM order stays the same but visual order flips. Use this when you need mirrored layouts without changing markup.

<div class="elementor-element flex flex-row-reverse gap-4">
  <div class="padding-4 background-primary text-white rounded">
    01
  </div>
  <div class="padding-4 background-primary text-white rounded">
    02
  </div>
  <div class="padding-4 background-primary text-white rounded">
    03
  </div>
</div>

Column

.flex-col stacks items vertically from top to bottom. This is the go-to direction for form fields, stacked card bodies, and sidebar navigation.

<div class="elementor-element flex flex-col gap-4">
  <div class="padding-4 background-primary text-white rounded">
    01
  </div>
  <div class="padding-4 background-primary text-white rounded">
    02
  </div>
  <div class="padding-4 background-primary text-white rounded">
    03
  </div>
</div>

Column Reverse

.flex-col-reverse stacks items from bottom to top. This is helpful for chat-style UIs or timeline patterns where the newest item should appear at the bottom of the markup but visually sit at the top.

<div class="elementor-element flex flex-col-reverse gap-4">
  <div class="padding-4 background-secondary text-white rounded">
    01
  </div>
  <div class="padding-4 background-secondary text-white rounded">
    02
  </div>
  <div class="padding-4 background-secondary text-white rounded">
    03
  </div>
</div>

Responsive Structure

Use the responsive suffix system for structural shifts at specific breakpoints:

Best Practices

• Add .flex first, then apply direction helpers to the same parent.
• Use .flex-col for stacked groups such as forms, settings panels, and button clusters.
• Use reverse helpers sparingly when visual order must change but markup stays fixed.

Related Utilities

Flex

Start with the base flex container utility

Flex Wrap

Let directional rows wrap naturally when needed