Flex

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

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.

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

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

<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

Display

Block, inline-block, hidden, and other display modes

Flex Basis

Initial main-axis size for flex items