Skip to main content
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.
ClassCSSContainer behavior
.flexdisplay: flexTakes up the full available width (block-level)
.inline-flexdisplay: inline-flexShrinks 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: 
<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: 
<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>
The .flex-col direction utility is documented in detail on the Direction & Wrap page, along with reverse variants and wrap behavior.

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

​
Best practices

Apply flex to the container

Add .flex to the parent container, not to the children. The flex children are controlled by their parent’s direction, alignment, and gap settings.

Use gap instead of margins

Prefer gap-* utilities over adding margins to individual children. Gap lives on the container and keeps children reusable across different layouts.

Combine with direction early

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.

Reserve inline-flex for inline contexts

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.

​
Related pages

Direction & Wrap

Control flex direction and wrapping behavior

Alignment

Justify and align items on both axes

Gap

Space flex children with uniform or axis-specific gaps