Elementor flexbox containers: a complete guide

Almost every container problem in Elementor comes down to one setting on the wrong value, or the right setting on the wrong container. This guide covers what each flexbox container control actually does, the layouts I build with them most, when a grid container is the better choice, and how to fix the layouts that break.

What are Elementor flexbox containers?

Elementor flexbox containers are layout blocks built on CSS Flexbox. A container holds widgets or other containers and arranges them in one direction, a row or a column, with controls for alignment, spacing and wrapping at every breakpoint. They replaced sections and columns, and have been on by default for new sites since Elementor 3.16 in September 2023.

The structure is flatter than the old system:

Sections and columns              Containers
Section                           Container
├── Column                        ├── Widget
│   └── Widget                    ├── Widget
└── Column                        └── Container
    └── Inner section                 ├── Widget
        └── Column                    └── Widget
            └── Widget

Every V3 component in Element UI, the Elementor component library, is built this way. Paste one in, open the Navigator, and you’ll see the same container patterns this guide walks through.

Why use flexbox containers instead of sections?

Containers do everything sections did with less markup, and they add controls sections never had. For a new V3 page, use containers. Sections still work on older sites, but there’s no reason to start a page with one today.

• A section with three columns wraps each widget in extra divs. One container with three widgets inside does the same job with less HTML for the browser to render.
• Sections allowed one level of inner section. Containers nest inside containers as deep as the layout needs, although you shouldn’t go deep (more on that below).
• Direction, order, alignment, wrap and gap can all change on tablet and mobile, so one container handles all three layouts without duplicate sections.
• Add a link to a container and the whole card becomes clickable, no custom code. The details are in how to make an Elementor container clickable.

What does each flexbox container setting do?

Five settings in the container’s Layout tab do almost all the work: direction, justify content, align items, gap and wrap. Direction picks the main axis. Justify content spreads items along that axis, align items lines them up across it, gap spaces them out, and wrap decides whether they can drop onto a new line when they run out of room. Try each one on the container at the top of this post.

Setting	What it does	Options	When I use it
Direction	Sets the main axis	Row, column, row reverse, column reverse	Row for side by side content, column for anything stacked
Justify content	Spreads items along the main axis	Start, center, end, space between, space around, space evenly	Space between to push a logo left and a menu right
Align items	Lines items up across the main axis	Start, center, end, stretch	Stretch for equal-height cards, center for text beside an image
Gap	Adds space between items, never around the outside	A value per breakpoint	Always, instead of margins on the children
Wrap	Lets items move onto a new line	No wrap, wrap	Wrap for card grids that should drop to fewer columns

Two things trip people up. First, align items works on the cross axis, so its meaning flips with direction: in a row it controls vertical alignment, in a column it controls horizontal alignment. Second, gap only adds space between items. If the container needs breathing room around its edges, that’s padding, and the difference is covered in how to use Elementor gaps, padding and margin.

Direction and wrap together decide how a layout responds, so they get their own walkthrough in how to use Elementor container direction and wrap settings.

When should a container be a row or a column?

Use row when items sit side by side: text beside an image, a logo next to a menu, a set of cards. Use column when they stack: a heading over a paragraph over a button. On smaller screens, fix the layout with width and spacing first by letting cards wrap, adjusting percentage widths or tightening the gap. Switch direction only when the layout genuinely has to stack.

A hero with text beside an image is the classic case where switching is right. On desktop the parent is a row, and on mobile it becomes a column so the image sits under the text. A row of four feature cards is the opposite case: turn on wrap and let them fall to two per row, then one, without touching direction at all.

Common layouts built with flexbox containers

These three cover most of what I build. Each is a parent container doing the layout and children doing the content.

Hero section with text beside an image

Container (direction: row)
├── Container (width: 50%, direction: column)
│   ├── Heading
│   ├── Text editor
│   └── Button
└── Image (width: 50%)

That’s Hero 01, a free component built on exactly this structure. For more starting points, the Elementor hero section templates use the same container logic with different content arrangements.

Three-column feature grid

Container (direction: row, wrap: wrap)
├── Container (width: 30%, grow: on)
│   ├── Icon or image
│   ├── Heading
│   └── Text editor
├── Container (width: 30%, grow: on)
└── Container (width: 30%, grow: on)

Set the card widths in percent, not pixels, and turn on grow so the cards share any leftover space. With wrap on, they drop onto new rows on smaller screens instead of squashing.

Navigation bar

Container (direction: row, justify: space between, align: center)
├── Image (logo)
├── Menu
└── Button

Space between does the positioning: logo on the left, button on the right, menu in the middle. No margins needed.

Flexbox container or grid container: which should you use?

Use a flexbox container for most layouts, because most layouts run in one direction. Use a grid container when items must line up in rows and columns at the same time: a gallery, a logo wall, or a card grid where every row has to stay aligned even when the content lengths differ. Since Elementor 3.16, Flexbox and Grid are separate containers in the Elements panel.

The free Gallery 01 and Partner logos 01 are good examples of where grid wins. The two also work together: a grid container can set out the cells while a flexbox container inside each cell arranges its content.

Using Elementor V4? It doesn’t use containers

If the Elements panel shows Div Block, Flexbox and Grid instead of Container, the site is running Elementor V4’s atomic editor, the default on new sites since April 2026, according to Elementor’s V4 FAQ. Those are atomic elements, not containers, and Elementor treats them as a separate system with its layout controls in the Style tab, so this guide covers V3 containers only.

Existing sites keep their containers, and V3 widgets and atomic elements can sit on the same page. For which V4 element replaces what, see Elementor Div Block vs Flexbox. For sections built with atomic elements, see the Elementor V4 components.

How do you convert sections to containers?

Use Elementor’s built-in converter. Open the section’s Layout settings and click Convert to container: Elementor adds a container copy below the original and leaves the section untouched, so you can compare the two, fix anything that shifted, and only then delete the section.

1. Select the section and open its Layout settings.
2. Click Convert to container.
3. Compare the copy with the original, adjust it if needed, then delete the original section.

Convert one section at a time. Most convert cleanly, but layouts with inner sections or custom widths sometimes need a manual fix, and it’s much easier to spot one when you’re only looking at one.

Flexbox container best practices

Keep nesting shallow. Containers can nest as deep as you like, but past three or four levels I simplify. Deep nesting adds markup and makes the Navigator hard to follow, and the extra level is usually doing a job that gap, alignment or a grid container could do instead.

Set gap on the parent, never margins on the children. Gap keeps spacing even and only applies between items, so nothing stacks up at the edges.

Solve the container logic before designing the cards inside it. Get direction, widths and wrap working with plain placeholder content first, then style. Styling a card that sits in a broken container is wasted work.

Use percentage widths or grow for columns. Pixel widths are the most common reason a row refuses to fit on a smaller screen.

Test on a real phone before the page goes live. The responsive preview is good, but it doesn’t catch everything an actual device does.

Why is my flexbox container layout broken?

Most broken flexbox container layouts come from one of five causes: the wrong direction, pixel widths, cards that don’t stretch, gap and margins fighting each other, or a parent container holding the width back. Check them in this order.

Items won’t sit side by side

Check the container’s direction is row. If it is, the items are probably too wide to fit, usually because their widths are in pixels. Switch them to percentages, or turn on wrap so they move to a new line instead of overflowing.

Cards have different heights

Set align items to stretch on the parent container. The children then grow to match the tallest one.

The spacing looks wrong

Look for gap and margins being used together, or padding on both the container and the widgets inside it. Use gap between items, remove widget margins, and check padding separately.

The container won’t go full width

The problem is almost never the container you’re looking at. It’s one level up: a parent set to boxed, a max width, or padding that fakes a boxed look. Elementor container not full width? Here’s why it happens and how to fix it walks through each cause.

The layout breaks on mobile

Check the widths and direction on the mobile breakpoint. Child containers usually need 100% width on mobile, and a row that holds side by side content usually needs to become a column.

Skip the layout setup

If you’d rather not build these structures from scratch, Element UI’s V3 components are flexbox container layouts you paste straight into Elementor. They’re lightly styled with placeholder content, ready for your brand’s fonts, colors and images, and already set up for tablet and mobile. Start with the free Elementor components, or browse the full Elementor component library.