> ## 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 Containers: .flex and .inline-flex in AtomicKit

> Activate flexbox on any Elementor element with AtomicKit's .flex and .inline-flex utilities, and switch display modes responsively with --on-* suffixes.

Flexbox is the foundation of most modern UI layouts, and AtomicKit makes it available in Elementor without writing a single line of CSS. Add `.flex` or `.inline-flex` to any container or widget in the **CSS Classes** field, then layer in direction, alignment, and gap utilities to compose exactly the layout you need.

## `.flex` vs `.inline-flex`

Both classes activate flexbox on the element, but they differ in how the container itself behaves inside its parent's layout flow.

| Class          | CSS                    | Container behavior                              |
| -------------- | ---------------------- | ----------------------------------------------- |
| `.flex`        | `display: flex`        | Takes up the full available width (block-level) |
| `.inline-flex` | `display: inline-flex` | Shrinks to fit its content (inline-level)       |

Use `.flex` for rows, columns, and any container that should span the full width of its parent. Use `.inline-flex` when the container needs to sit alongside other inline content — such as a badge inside a sentence or a small button group within a text block.

## Horizontal layout

The default flex direction is row, so adding `.flex` alone lines children up side by side. Combine it with a gap utility to add consistent spacing between items:

```html theme={null}
<div class="flex gap-4">
  <div>Item one</div>
  <div>Item two</div>
  <div>Item three</div>
</div>
```

This is the go-to pattern for navigation bars, icon rows, button groups, and any horizontal list of components.

## Vertical layout

Add `.flex-col` to stack children top to bottom. This is ideal for form fields, stacked cards, and sidebar widget lists:

```html theme={null}
<div class="flex flex-col gap-4">
  <label>Name</label>
  <input type="text" placeholder="Your name" />
  <label>Email</label>
  <input type="email" placeholder="Your email" />
  <button type="submit">Send</button>
</div>
```

<Tip>
  The `.flex-col` direction utility is documented in detail on the [Direction & Wrap](/flexbox/direction) page, along with reverse variants and wrap behavior.
</Tip>

## Inline flex

`.inline-flex` keeps the container in the text flow while still giving you flex alignment controls. A common use case is a label badge that sits within a heading or paragraph:

```html theme={null}
<p>
  This feature is
  <span class="inline-flex items-center gap-1">
    <span>✦</span>
    <span>New</span>
  </span>
  in version 2.
</p>
```

The badge aligns its icon and text with `.items-center`, and both stay inline with the surrounding prose.

## Responsive variants

Every flex utility accepts the `--on-*` responsive suffix. This lets you switch an element's display mode at specific breakpoints — a common pattern is stacking content vertically on mobile and switching to a row on wider screens:

```html theme={null}
<!-- Block on mobile, flex row on medium screens and up -->
<div class="block flex--on-m gap-4">
  <div>Left column</div>
  <div>Right column</div>
</div>
```

You can also remove flex behavior at a breakpoint:

```html theme={null}
<!-- Flex by default, hidden on small screens -->
<div class="flex hidden--on-s gap-6">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>
```

<Info>
  Responsive suffixes are mobile-first and stack: `--on-s`, `--on-m`, `--on-l`, `--on-xl`. A class without a suffix applies at every viewport size.
</Info>

## Best practices

<CardGroup cols={2}>
  <Card title="Apply flex to the container" icon="box">
    Add `.flex` to the parent container, not to the children. The flex children are controlled by their parent's direction, alignment, and gap settings.
  </Card>

  <Card title="Use gap instead of margins" icon="arrows-left-right-to-line">
    Prefer `gap-*` utilities over adding margins to individual children. Gap lives on the container and keeps children reusable across different layouts.
  </Card>

  <Card title="Combine with direction early" icon="arrow-right">
    Decide on `.flex-row` or `.flex-col` when you add `.flex`. The default is row, but being explicit makes the layout easier to read and override at breakpoints.
  </Card>

  <Card title="Reserve inline-flex for inline contexts" icon="text">
    Use `.inline-flex` only when the container needs to flow with surrounding text or inline elements. For standalone layout regions, `.flex` is almost always the right choice.
  </Card>
</CardGroup>

## Related pages

<CardGroup cols={3}>
  <Card title="Direction & Wrap" href="/flexbox/direction" icon="arrows-up-down">
    Control flex direction and wrapping behavior
  </Card>

  <Card title="Alignment" href="/flexbox/alignment" icon="align-center">
    Justify and align items on both axes
  </Card>

  <Card title="Gap" href="/flexbox/gap" icon="arrows-left-right">
    Space flex children with uniform or axis-specific gaps
  </Card>
</CardGroup>