We’ll break down what Flexbox containers actually do, why they’re better than the legacy system, and how to use them effectively in your builds.
What Are Elementor Flexbox Containers?
Flexbox containers are Elementor’s implementation of CSS Flexbox – a layout system that controls how elements align, space, and resize within a container.
Instead of the old structure (sections → columns → inner sections → widgets), you now work with containers that can hold widgets directly or nest inside each other infinitely.
The old way:
Section
└── Column
└── Widget
└── Column
└── Inner Section
└── Column
└── Widget
The new way:
Container
└── Widget
└── Widget
└── Container
└── Widget
└── Widget
The result is cleaner code, faster pages, and more flexibility in how you arrange elements.
Why Flexbox Containers Are Better Than Sections
If you’ve been using Elementor for a while, you might wonder why the change was necessary. Here’s what Flexbox containers actually improve:
1. Faster Page Load Times
Every section, column, and inner section in the old system added wrapper divs to your page’s HTML. More divs means a larger DOM, which means slower rendering.
Flexbox containers reduce wrapper elements significantly. A layout that previously required a section with three columns now needs just one container with three widgets inside. Less code and faster page load.
2. Unlimited Nesting
The old system limited you to one inner section per section. Need more complexity? Too bad, you’d have to get creative with workarounds.
With Flexbox containers, you can nest containers inside containers as deep as you need. Complex layouts that were previously impossible (or required custom CSS) are now straightforward.
3. Better Responsive Control
Flexbox gives you granular control over how elements behave at different breakpoints:
- Direction: Switch from horizontal to vertical layout on mobile
- Order: Rearrange elements without duplicating content
- Alignment: Control how items align on both axes
- Wrapping: Decide whether items wrap to new rows or stay inline
- Gap: Set consistent spacing between elements
All of these can be adjusted per breakpoint, so your desktop layout and mobile layout can behave completely differently – without creating duplicate sections.
4. Clickable Containers
Previously, making an entire card or section clickable required custom code or third-party plugins. With Flexbox containers, you can add a link directly to any container. The whole thing becomes clickable.
5. Cleaner Workflow
Working with sections and columns meant constantly thinking about structure. “Do I need an inner section here? How many columns?”
Containers simplify this. Add a container, place widgets inside, adjust the direction and alignment. The layout logic is more intuitive once you understand Flexbox basics.
How Flexbox Containers Work
Understanding a few core concepts makes Flexbox containers much easier to use.
Direction
Direction controls whether items inside the container stack horizontally (row) or vertically (column).
- Row: Items sit side by side, left to right
- Column: Items stack top to bottom
- Row Reverse: Items sit side by side, right to left
- Column Reverse: Items stack bottom to top
Most layouts use Row for horizontal sections (like a hero with text and image side by side) and Column for vertical stacking (like a list of features).
Learn more about direction in our ‘How to use Elementor container direction and wrap settings‘ guide.
Justify Content
Justify Content controls how items distribute along the main axis (the direction you set).
- Flex Start: Items bunch up at the beginning
- Center: Items centre in the container
- Flex End: Items bunch up at the end
- Space Between: Items spread out with equal space between them
- Space Around: Items spread out with equal space around them
- Space Evenly: Items spread out with perfectly equal spacing
For a navigation bar, you might use Space Between to push the logo left and menu items right.
Align Items
Align Items controls how items align on the cross axis (perpendicular to the direction).
If your container direction is Row, Align Items controls vertical alignment. If direction is Column, it controls horizontal alignment.
- Flex Start: Items align to the top (or left)
- Center: Items align to the middle
- Flex End: Items align to the bottom (or right)
- Stretch: Items stretch to fill the container
Gap
Gap sets the space between items in the container. Unlike margins, gap only applies between items – not around the outside edges.
This is cleaner than setting margins on individual widgets and makes consistent spacing much easier.
Wrap
Wrap controls whether items stay on one line or wrap to new rows when they run out of space.
- No Wrap: Items squeeze together on one line
- Wrap: Items wrap to new rows as needed
For a grid of cards, you’d use Wrap so cards flow to the next row on smaller screens.
When to Use Row vs Column Direction
Choosing the right direction is the first decision for any container.
Use Row (horizontal) for:
- Hero sections with text beside an image
- Navigation bars
- Logo grids
- Side-by-side feature comparisons
- Card layouts (combined with Wrap)
Use Column (vertical) for:
- Stacked content blocks
- Single-column text sections
- Mobile layouts (switch from Row on desktop)
- Vertical navigation menus
- Form layouts
The responsive pattern:
Most layouts use Row on desktop and switch to Column on mobile. A hero section might show headline and image side by side on desktop, then stack them vertically on mobile. Set direction to Row on desktop and Column on tablet/mobile breakpoints.
Common Layout Patterns with Flexbox Containers
Here’s how to build common section types using containers effectively.
Hero Section (Text + Image)
Structure:
Container (Direction: Row)
└── Container (Set to 50% width and Direction: Column)
└── Heading widget
└── Text widget
└── Button widget
└── Image widget (Set to 50% width)
Three-Column Feature Grid
Structure:
Container (Direction: Row and Wrap: Wrap)
└── Container (Feature 1 – width 30% with grow toggled on)
└── Image widget
└── Heading widget
└── Text widget
└── Container (Feature 2 – width 30% with grow toggled on)
└── …
└── Container (Feature 3 – width 30% with grow toggled on)
└── …
Navigation Bar
Structure:
Container (Direction: Row)
└── Image widget (Logo)
└── Nav Menu
└── Button widget (CTA)
Converting Old Sections to Containers
If you have existing pages built with sections and columns, Elementor provides a built-in conversion tool.
To convert a single section:
- Hover over the section
- Click the Edit Section icon
- In the Layout settings, click “Convert to containers”
- Elementor creates a container copy below the original
- Compare the two and adjust the container if needed
- Delete the original section
Important notes: Convert one section at a time so you can review each conversion as some layouts may need manual adjustment after conversion.
Don’t switch back and forth. If you convert to containers and then deactivate the Flexbox feature, your container content disappears (it returns when you reactivate, but toggling is risky).
Flexbox Container Best Practices
Keep Nesting Reasonable
Yes, you can nest containers infinitely. No, you shouldn’t go crazy with it. Deep nesting still creates DOM bloat and can make your layout harder to manage.
A good rule: if you’re more than three levels of containers deep, consider whether you can simplify the structure.
Use Gap Instead of Margins
Gap creates consistent spacing between items without affecting the container’s outer edges. It’s cleaner than setting margins on every widget. Set gap on the parent container rather than margins on children.
Set Up Responsive Direction Early
Decide how your layout should behave on mobile before building. Most horizontal layouts need to switch to vertical (Column) on smaller screens. Set this up as you build rather than trying to fix it later.
Use Percentage Widths or Flex Grow
For multi-column layouts, either set percentage widths on child containers (33%, 50%, etc.) or use Flex Grow to let them share space automatically.
Flex Grow is more flexible as it allows items to expand to fill available space proportionally.
Test on Real Devices
Before taking the page live. I always suggest testing your layouts on actual phones and tablets to catch issues you might have missed in the preview.
Troubleshooting Common Issues
Items Won’t Sit Side by Side
Check: Is the container direction set to Row? Is Wrap set to No Wrap or are items too wide to fit i.e you are using pixels instead of % for container widths?
Fix: Set direction to Row. If items still stack, they may be too wide, check and reduce widths or enable Wrap.
Unequal Heights in Multi-Column Layouts
Check: Are you using Align Items Stretch on the parent container?
Fix: Set Align Items to Stretch so child containers expand to match the tallest one.
Spacing Looks Wrong
Check: Are you mixing gap and margins? Is there padding on the container or widgets?
Fix: Use gap for spacing between items. Remove widget margins if gap is set. Check container padding separately.
Layout Breaks on Mobile
Check: Did you adjust direction and widths for mobile breakpoints?
Fix: Switch direction to Column on mobile. Set child container widths to 100% on mobile.
Wrapping up
Flexbox containers are a significant improvement over Elementor’s old section and column system. They produce cleaner code, load faster, and give you more control over responsive layouts.
The key concepts to remember:
Direction controls whether items stack horizontally or vertically
Justify Content distributes items along the main axis
Align Items aligns items on the cross axis
Gap sets spacing between items
Wrap controls whether items flow to new rows
Once these click, building layouts becomes faster and more intuitive.
Need Flexbox based layouts without the setup time? Browse Element UI’s free component library – every component is built with containers and ready to paste.
