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

> Start flex layouts with `.flex` and `.inline-flex` container utilities and their responsive variants.

export const FlexRowDemo = () => {
  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</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    gap: "1rem"
  }}>
            <div style={blockStyle}>Logo</div>
            <div style={blockStyle}>Docs</div>
            <div style={blockStyle}>Download</div>
          </div>
        </div>
      </div>
    </div>;
};

export const FlexColDemo = () => {
  const blockStyle = {
    background: "#0f766e",
    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.flex-col</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    flexDirection: "column",
    gap: "1rem"
  }}>
            <div style={blockStyle}>Heading</div>
            <div style={blockStyle}>Body</div>
            <div style={blockStyle}>Button</div>
          </div>
        </div>
      </div>
    </div>;
};

export const InlineFlexDemo = () => {
  const chip = {
    background: "#7c3aed",
    color: "#ffffff",
    borderRadius: "0.5rem",
    padding: "0.35rem 0.65rem",
    fontSize: "0.8rem",
    fontWeight: 600,
    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">.inline-flex</span>
        <div className="tw-demo-card" style={{
    textAlign: "center"
  }}>
          <span style={{
    fontSize: "0.875rem",
    color: "var(--demo-fg-muted)"
  }}>Label </span>
          <span style={{
    display: "inline-flex",
    alignItems: "center",
    gap: "0.35rem",
    ...chip
  }}>
            <span>New</span>
          </span>
          <span style={{
    fontSize: "0.875rem",
    color: "var(--demo-fg-muted)"
  }}> sits in the sentence flow.</span>
        </div>
      </div>
    </div>;
};

## Overview

**`.flex`** and **`.inline-flex`** start a flex formatting context. Use **`.flex`** for full-width toolbars, sections, and grids; use **`.inline-flex`** when the container should sit **in inline flow** (chips, badges in copy, compact controls next to text). Add one of these on the parent before direction, wrap, gap, justify, or alignment helpers.

| Class          | CSS                     | Use                                                         |
| -------------- | ----------------------- | ----------------------------------------------------------- |
| `.flex`        | `display: flex;`        | Block-level flex container (default choice for layouts)     |
| `.inline-flex` | `display: inline-flex;` | Inline flex container (flows with text and sibling inlines) |

## Horizontal Layout

Adding `.flex` to a container lays its children out in a horizontal row by default.

<FlexRowDemo />

```html theme={null}
<div class="elementor-element flex gap-4">
  <div class="padding-4 background-primary text-white rounded">
    Logo
  </div>
  <div class="padding-4 background-primary text-white rounded">
    Docs
  </div>
  <div class="padding-4 background-primary text-white rounded">
    Download
  </div>
</div>
```

## Vertical Layout

Pair `.flex` with `.flex-col` to stack children vertically. This is useful for form groups, card bodies, and sidebar navigation.

<FlexColDemo />

```html theme={null}
<div class="elementor-element flex flex-col gap-4">
  <div class="padding-4 background-success text-white rounded">
    Heading
  </div>
  <div class="padding-4 background-success text-white rounded">
    Body
  </div>
  <div class="padding-4 background-success text-white rounded">
    Button
  </div>
</div>
```

## Inline flex

**`.inline-flex`** behaves like **`.flex`** for children (row by default, works with **`flex-col`**, **`gap-*`**, alignment utilities) but the **box** itself is **inline**, so it can sit beside text or other inline content without forcing a new block row.

<InlineFlexDemo />

```html theme={null}
<p class="text-gray">
  Status:
  <span class="inline-flex items-center gap-1 padding-horizontal-2 padding-vertical-1 rounded background-primary text-white text-sm font-semibold">
    Live
  </span>
  on all environments.
</p>
```

## Responsive Variants

The framework ships structural breakpoint variants for both display modes:

**`.flex--on-*`**

* `.flex--on-xs`
* `.flex--on-s`
* `.flex--on-m`
* `.flex--on-l`
* `.flex--on-xl`
* `.flex--on-xxl`

**`.inline-flex--on-*`**

* `.inline-flex--on-xs`
* `.inline-flex--on-s`
* `.inline-flex--on-m`
* `.inline-flex--on-l`
* `.inline-flex--on-xl`
* `.inline-flex--on-xxl`

## Best Practices

* Add **`.flex`** or **`.inline-flex`** at the **container** level, not on the children.
* Keep spacing with **`gap-*`** on the parent instead of margins on each child.
* Switch to responsive **`--on-*`** helpers when the layout should only become flex (or inline-flex) at certain breakpoints.
* Prefer **`.inline-flex`** over **`.flex`** when the flex container must share a line with text or stay as wide as its content in inline layout.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Display" icon="display" href="/layout/display">
    Block, inline-block, hidden, and other display modes
  </Card>

  <Card title="Flex Basis" href="/flexbox/flex-basis">
    Initial main-axis size for flex items
  </Card>
</CardGroup>