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

# Flex Direction, Wrap, and Order Utilities in AtomicKit

> Set flex direction and wrap behavior in Elementor using AtomicKit's flex-row, flex-col, flex-wrap, basis, grow, shrink, and order utilities.

Once you have a flex container, the direction utilities determine which way its children flow — left to right, top to bottom, or in reverse. Wrap utilities decide what happens when children run out of space. Together these two sets give you full control over how a layout adapts to different content amounts and screen sizes without extra container nesting.

## Flex direction

The direction utilities set the main axis of a flex container. All four values are available:

| Class               | CSS                              | Effect                                |
| ------------------- | -------------------------------- | ------------------------------------- |
| `.flex-row`         | `flex-direction: row`            | Children flow left to right (default) |
| `.flex-col`         | `flex-direction: column`         | Children stack top to bottom          |
| `.flex-row-reverse` | `flex-direction: row-reverse`    | Children flow right to left           |
| `.flex-col-reverse` | `flex-direction: column-reverse` | Children stack bottom to top          |

### Horizontal row — navigation bar

The default flex direction is already `row`, but declaring it explicitly makes your intent clear and makes responsive overrides more predictable:

```html theme={null}
<nav class="flex flex-row gap-4">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/work">Work</a>
  <a href="/contact">Contact</a>
</nav>
```

### Vertical column — form stack

Switch to `.flex-col` to stack form fields, card sections, or sidebar items cleanly:

```html theme={null}
<form class="flex flex-col gap-4">
  <input type="text" placeholder="Full name" />
  <input type="email" placeholder="Email address" />
  <textarea placeholder="Your message"></textarea>
  <button type="submit">Send message</button>
</form>
```

### Responsive direction change

A very common pattern is stacking items vertically on mobile and switching to a row on medium screens and up. Use the `--on-*` suffix to override direction at a breakpoint:

```html theme={null}
<!-- Column on mobile, row from medium breakpoint upward -->
<div class="flex flex-col flex-row--on-m gap-4">
  <div class="basis-1-3">Sidebar</div>
  <div class="basis-2-3">Main content</div>
</div>
```

<Tip>
  Reverse variants (`.flex-row-reverse`, `.flex-col-reverse`) are useful when you want the visual order to differ from the DOM order — for example, placing a call-to-action before its supporting copy in the visual layout while keeping the semantic HTML order intact for accessibility.
</Tip>

## Flex wrap

Wrap utilities control whether children are forced onto a single line or allowed to wrap onto additional lines when there is not enough space.

| Class                | CSS                       | Effect                                   |
| -------------------- | ------------------------- | ---------------------------------------- |
| `.flex-nowrap`       | `flex-wrap: nowrap`       | All children stay on one line (default)  |
| `.flex-wrap`         | `flex-wrap: wrap`         | Children wrap to new lines as needed     |
| `.flex-wrap-reverse` | `flex-wrap: wrap-reverse` | Children wrap upward instead of downward |

### Responsive card grid with flex-wrap

Adding `.flex-wrap` turns a flex row into a responsive multi-line layout. Combine it with `basis-*` utilities to set each card's target width:

```html theme={null}
<div class="flex flex-wrap gap-4">
  <div class="basis-full basis-1-2--on-m basis-1-3--on-l">Card one</div>
  <div class="basis-full basis-1-2--on-m basis-1-3--on-l">Card two</div>
  <div class="basis-full basis-1-2--on-m basis-1-3--on-l">Card three</div>
  <div class="basis-full basis-1-2--on-m basis-1-3--on-l">Card four</div>
</div>
```

On small screens every card takes full width. On medium screens they pair up in two columns. On large screens they sit three across.

### Responsive wrap toggle

Sometimes you want wrapping on mobile (where space is tight) but a single enforced row on larger screens:

```html theme={null}
<div class="flex flex-wrap flex-nowrap--on-m gap-4">
  <div>Tab one</div>
  <div>Tab two</div>
  <div>Tab three</div>
  <div>Tab four</div>
</div>
```

## Flex grow, shrink, and basis

These utilities control how individual flex children size themselves relative to available space.

| Class          | CSS                | Effect                                           | Responsive |
| -------------- | ------------------ | ------------------------------------------------ | ---------- |
| `.flex-grow`   | `flex-grow: 1`     | Child expands to fill leftover space             | —          |
| `.flex-shrink` | `flex-shrink: 1`   | Child shrinks when space is tight                | —          |
| `.basis-auto`  | `flex-basis: auto` | Size based on content width                      | `--on-*`   |
| `.basis-full`  | `flex-basis: 100%` | Take the full container width                    | `--on-*`   |
| `.basis-0`     | `flex-basis: 0`    | Start from zero — let flex-grow distribute space | `--on-*`   |
| `.basis-px`    | `flex-basis: 1px`  | Minimal basis for grow-only columns              | `--on-*`   |

### Fractional basis values

Use fractional basis classes to split a row into proportional columns. All fractional basis classes support the `--on-*` responsive suffix, making them ideal for column layouts that reflow at different breakpoints.

| Class        | Value   | Use case                        |
| ------------ | ------- | ------------------------------- |
| `.basis-1-2` | 50%     | Two equal columns               |
| `.basis-1-3` | 33.333% | Three equal columns             |
| `.basis-2-3` | 66.666% | Wide main + narrow sidebar      |
| `.basis-1-4` | 25%     | Four equal columns              |
| `.basis-3-4` | 75%     | Wide main + very narrow sidebar |

```html theme={null}
<!-- Two-thirds / one-third split layout -->
<div class="flex flex-row gap-6">
  <div class="basis-2-3">Main content</div>
  <div class="basis-1-3">Sidebar</div>
</div>
```

<Note>
  Fractional basis utilities work best alongside `.flex-wrap` and without `flex-grow` applied, so children don't expand beyond their intended proportion. If you want fluid columns that fill all remaining space, combine `.basis-0` with `.flex-grow` instead.
</Note>

## Order

Order utilities let you rearrange flex children visually without changing the DOM structure — helpful for accessibility and for responsive layouts where priority order differs across screen sizes. Both classes support the `--on-*` responsive suffix so you can change visual order at specific breakpoints.

| Class          | CSS             | Effect                        |
| -------------- | --------------- | ----------------------------- |
| `.order-first` | `order: -99999` | Move item to the visual start |
| `.order-last`  | `order: 99999`  | Move item to the visual end   |

```html theme={null}
<!-- CTA appears last in HTML but first on small screens -->
<div class="flex flex-col flex-row--on-m gap-4">
  <div>Supporting detail</div>
  <div>Secondary detail</div>
  <div class="order-first order-last--on-m">Call to action</div>
</div>
```

## Best practices

<CardGroup cols={2}>
  <Card title="Always declare direction" icon="compass">
    Even though `flex-row` is the browser default, adding it explicitly makes responsive overrides clearer and avoids confusion when reading the class list later.
  </Card>

  <Card title="Pair wrap with basis" icon="table-columns">
    `.flex-wrap` alone won't create even columns. Set a `basis-*` class on each child so they wrap at the right widths rather than collapsing to their content size.
  </Card>

  <Card title="Use order sparingly" icon="sort">
    Order changes only the visual sequence — screen readers and keyboard navigation still follow the DOM order. Use it for cosmetic reordering, not for meaningful content sequences.
  </Card>

  <Card title="Reverse for RTL mirroring" icon="arrow-right-arrow-left">
    Reverse direction variants can substitute for RTL layout adjustments in simple cases, but for full RTL support consider using logical CSS properties in your custom styles.
  </Card>
</CardGroup>