Elementor Flexbox Container widget is a way to apply the same order, positioning, and size settings on a group of items that are confined within the same container. These items can either be other containers placed inside the parent container, or widgets.
Flexbox Containers are a flexible way to organize items in a column or a row. It’s efficient, dynamic, and responsive. It replaces the outdated and rigid section-column layouts.
Flexbox operates on two axes. The Main Axis crosses the width of the container and a Cross Axis literally crosses the height of the container.
The container options allow users to define these settings on 3 levels:
- The container level – these settings will affect the container itself, its size, and its layout.
- The items group level – these settings will affect the items as a group. For instance, the direction of the items, the spacing between them, their alignment, etc.
- The specific item level – each item inside the container can accept specific settings, which will overrule the group settings. For instance, if the group is aligned to the center, you can define one item to align to Flex Start (top of the container).
Why use Flexbox Containers?
As containers are a new lean layout structure feature in Elementor, they allow you to achieve pixel-perfect responsive designs and highly advanced layouts, quickly and with a much slimmer markup, which reduces the DOM output and improves performance significantly.
With Flexbox Containers, you can place widgets directly inside a Container, as well as nest Containers. You can control the layout and distribution of elements within the Container, and adjust your content to every screen size, resulting in greater responsiveness, without compromising on speed.
Additionally, you can improve the user experience by making the entire Container clickable by adding a link to it.
Flexbox Containers vs. Sections and Columns
Here are some things you should know about the relationship between Flexbox Containers and Sections and Columns:
- After the introduction of Flexbox containers into the Elementor, it will not be possible to create new sections and columns.
- Existing sections and columns will remain intact and functional.
- As best practice, we suggest having all of your pages built with one of the two: either sections and columns or flexbox containers.
Tip: You can convert your sections and columns to flexbox containers using the Converter tool.
