Flexbox containers are an excellent way to layout content within your pages, as it provides you with greater control over how the elements behave on various screen sizes, allowing you create responsive sites that look great both on desktop and mobile devices.

“Flexbox – Elementor’s new building block that empowers you to efficiently lay out, align and distribute items in a Container in an ultra lightweight and responsive way…” explains the Elementor Flexbox team. “Flexbox Containers [are our] new lean layout structure that brings CSS Flexbox into the Editor.”

Using the new Flexbox containers empower Elementor developers to “build complex layout patterns by nesting any number of containers and items” they explain further. “They can easily be aligned, ordered, spaced and scaled in a horizontal or vertical direction.”

Flexbox eliminates the need for inner sections and columns entirely, bringing Elmentor’s development process ahead of the competition. This is clearly giving Elementor an edge as more and more organizations and developers choose Elementor for their website development project.

“With Flexbox Containers, you can use a single container, add all the logos you want, and change the Container’s direction from column to row, to see all your logos in one row, in a single click. You can also leverage the Justify Content control to distribute the logos as you’d like within the Container.”

Elementor Flexbox containers, released as a part of Elementor 3.6 with an original release date of March 22nd, then re-released as 3.6.1 on May 4, 2023. Elementor describes 3.6 as a “first step in a series of infrastructural updates that will transform the way you build websites.”

The aim of the release, and the new Flexbox containers, was to “achieve pixel-perfect responsive designs and highly advanced layouts quickly, and with a much slimmer markup, which improves performance significantly” they explain.

When Elementor 3.6 was initially released, back in late March, some users encountered technical issues with numerous third party plugins, which caused the Elementor editor to fail to load correctly, and was attributed to some incompatibility issues.

“We immediately released a patch with Elementor 3.6.1, which should resolve most occurrences of this issue by reducing the error enforcement rules, and will allow the Editor to load.”

Big benefits for using Flexbox

The real benefit for many will be the boost in performance. As developers integrate Flexbox into their best-practices for developing with Elementor, we expect to see a huge improvement in the overall user experience of Elementor websites (both from a development perspective, and an end-user browsing the website), but also we expect to see improvements in the overall performance of websites built with the platform.

“Flexbox Containers have fewer wrapping elements which generate less code, so your website loads and runs so much faster.”

Feedback is in, and users are reporting excellent results with Flexbox. “Once you get your head around the basics it’s an absolute pleasure to use. My pages load faster” offers Inspector-Tech on the Youtube live demonstration of the release. “I have no issues with pages displaying weirdly or any major compatibility issues with other plugins. I’m now able to concentrate about 85% purely on design and workflow whereas previously, it was about 25% design and 75% headaches because things would not work as expected. Seriously.”

What is the difference between containers and sections in Elementor?

Functionally, from a development standpoint, there isn’t a lot of difference. Most developers are familiar with the concept of flexbox, so adopting this new tool within Elementor shouldn’t be difficult.

Simply by reducing the dividers used previously with sections/columns/inner sections and implementing new Flexbox containers, you can improve the DOM load on the page.

Some key benefits of Flexbox over sections:

• Faster build time for designers and developers
• Increased efficiency, running leaner code
• Easily create clickable Containers
• Unlimited nesting depth
• Easier responsive design

Flexbox containers are a new feature in Elementor that allow for easier, more efficient page design. Flexbox eliminates the need for inner sections and columns entirely, bringing Elmentor’s development process ahead of the competition. Containers make it easy to align items horizontally or vertically, as well as distribute them evenly within the container with no additional code needed. Using flexboxes offer many benefits such as improved performance (faster load times), increased efficiency (running leaner code), unlimited nesting depth and easier responsive design without any major compatibility issues with other plugins.

Ready to try the new Elementor Containers? Check out the Containers Playground

To make it easier to learn and explore the possibilities of using Flexbox containers, Elementor built the Containers Playground. The Playground includes a number of ‘lessons’ intended to teach you how to use Containers in your design workflow and help you to get accustomed to designing with Flexbox Containers.