> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Flex Direction

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

export const FlexRowDemo = () => {
  const blockStyle = {
    background: "#db2777",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.flex-row</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    gap: "1rem"
  }}>
            <div style={blockStyle}>01</div>
            <div style={blockStyle}>02</div>
            <div style={blockStyle}>03</div>
          </div>
        </div>
      </div>
    </div>;
};

export const FlexRowReverseDemo = () => {
  const blockStyle = {
    background: "#7c3aed",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.flex-row-reverse</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    flexDirection: "row-reverse",
    gap: "1rem"
  }}>
            <div style={blockStyle}>01</div>
            <div style={blockStyle}>02</div>
            <div style={blockStyle}>03</div>
          </div>
        </div>
      </div>
    </div>;
};

export const FlexColDemo = () => {
  const blockStyle = {
    background: "#2563eb",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.flex-col</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    flexDirection: "column",
    gap: "1rem"
  }}>
            <div style={blockStyle}>01</div>
            <div style={blockStyle}>02</div>
            <div style={blockStyle}>03</div>
          </div>
        </div>
      </div>
    </div>;
};

export const FlexColReverseDemo = () => {
  const blockStyle = {
    background: "#0891b2",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.flex-col-reverse</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    flexDirection: "column-reverse",
    gap: "1rem"
  }}>
            <div style={blockStyle}>01</div>
            <div style={blockStyle}>02</div>
            <div style={blockStyle}>03</div>
          </div>
        </div>
      </div>
    </div>;
};

## 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.

<FlexRowDemo />

```html theme={null}
<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.

<FlexRowReverseDemo />

```html theme={null}
<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.

<FlexColDemo />

```html theme={null}
<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.

<FlexColReverseDemo />

```html theme={null}
<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

<CardGroup cols={2}>
  <Card title="Flex" href="/flexbox/flex">
    Start with the base flex container utility
  </Card>

  <Card title="Flex Wrap" href="/flexbox/wrap">
    Let directional rows wrap naturally when needed
  </Card>
</CardGroup>