Skip to main content

​
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.
ClassCSSUse
.flexdisplay: flex;Block-level flex container (default choice for layouts)
.inline-flexdisplay: 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="p-4 bg-primary text-white rounded">
    Logo
  </div>
  <div class="p-4 bg-primary text-white rounded">
    Docs
  </div>
  <div class="p-4 bg-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="p-4 bg-teal text-white rounded">
    Heading
  </div>
  <div class="p-4 bg-teal text-white rounded">
    Body
  </div>
  <div class="p-4 bg-teal 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 px-2 py-1 rounded bg-violet 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
<div class="elementor-element block flex--on-m gap-6">
  <div class="card p-6">
    Primary
  </div>
  <div class="card p-6">
    Secondary
  </div>
</div>

<div class="elementor-element block inline-flex--on-m items-center gap-2">
  <span class="text-sm font-semibold">Toolbar</span>
  <span class="badge">Beta</span>
</div>

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

Display

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

Flex Basis

Initial main-axis size for flex items

Flex Direction

Choose row, column, and reverse flow

Flex Wrap

Keep items on one line or wrap them

Gap

Add container-owned spacing between children

Responsive Utilities

Review the full shipped --on-* system