Divi is introducing Flexbox to provide users with more powerful and flexible layout options for their websites. This guide will walk you through the key aspects of the new Flexbox implementation, helping both new and existing users harness its capabilities.
What is Flexbox in Divi?
Flexbox is a new layout system being integrated into Divi, allowing for more efficient arrangement and alignment of items within containers. It is available for Sections, Rows, Columns, and Module Groups.
Getting started with the new Flexbox Layout
When you click the Add New Row button (inside a section), you’ll see new row templates right away, including nested multi-row options, which provide a much greater variety.
These starting templates are handy starting points, not limits. After adding the Row, open its settings panel and go to the Design tab → Layout.
Just like with the Block layout, you can also add Nested Rows inside Flex Rows.
Key Changes and New Features
Layout Type: Block vs. Flex
With the Flexbox update, containers (section, row, column, group module) will have a new Layout option group in the Design Tab.
Default for New Containers: The Flex layout will be set as the default Layout option for all elements.
Legacy Elements: Existing elements on your pages will remain set to Block layout.
Switching Layouts: You can switch between Flex and Block layouts at any time.
Full Width and Specialty Sections: These sections will still be supported but can no longer be added directly from the Add Section flow, unless loaded from a saved Divi Library or Cloud item.
Flex Layout Options
When Flex is selected as the layout type, new options become available in the Layout Option Group:
Horizontal Gap (
grid-column-gap): sets the horizontal space between columns.Vertical Gap (
grid-row-gap): sets the vertical space between columnsLayout Direction (
flex-direction): controls the flow of flex items:Row
: Left-to-RightRow Reverse
: Right-to-leftColumn
: Top-to-bottomColumn Reverse
: Bottom-to-top
Justify Content (
justify-content):Note: This option will have no effect unless a custom element height, min-height, or max-height is defined.
Start
: Items are aligned to the left/top edge.Center
: Items are aligned in the center.End
: Items are aligned to the right/bottom edge.Space between
: The first item is aligned to the left/top edge, the last item is aligned to the right/bottom edge, and leftover space fills the gaps between items.Space Around
: Equal space around every item, so the outer margins end up half as big as the inner gaps.Space Evenly
: Same gap size everywhere, including the ends, for perfectly uniform spacing.
Align Items (
align-items):Start
: Align items to the left/top edge.Center
: Align items in the center.End
: Align items on the right/bottom edge.Stretch
: Expand items to fill the full width/height of the parent container.
Layout Wrapping (
flex-wrap):No Wrap(default)
: Items do not wrap.Wrap
: If the container width is not enough, items will wrap on the following line.Wrap Revers
: If the container width is not enough, items will wrap on the following line in reversed order.
Wrapping Alignment (
align-content) - Only displayed if Layout Wrapping is enabled.Stretch
: If the combined size of the items along the cross axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis.Start
: The items are packed flush to each other against the edge of the alignment container, depending on the flex container's cross-start side. Center
: The items are packed flush to each other in the center of the alignment container along the cross axis.End
: The items are packed flush to each other against the end edge of the alignment container in the cross-axis.Space Between
: The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the start edge of the alignment container in the cross axis, and the last item is flush with the end edge of the alignment container in the cross axis.Space Around
: The items are evenly distributed within the alignment container along the cross-axis. The spacing between each pair of adjacent items is the same. The space before the first and after the last item equals half of the space between each pair of adjacent items.Space Evenly
: The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items, the start edge and the first item, and the end edge and the last item, is all the same.
New Order Option Group
Elements within a Flex container will gain a new Order option group located in the Content tab, above the Admin Label OG. This field supports only numerical values, and it is used to define the order in which each item is displayed inside a flex container.
Flex Grid CSS Framework
Flexbox Rows will utilize a new column framework with a class-based system for column widths. This new grid system uses calc() with a CSS variable for gutter width, allowing for dynamic column widths based on user-defined gutter widths and any CSS length unit.
Alignment Differences: Block vs. Flex Containers
Block Containers: Child items in block-based containers receive margin definitions for alignment (e.g., margin-left: auto for center alignment).
Flex Containers: Child items in flex-based containers receive align-self definitions for alignment (e.g., align-self: center for center alignment). Flex containers also introduce an additional Stretch alignment option, which is the default selected option.
Layout Switching Alignment: If an element's alignment is defined and its parent's layout type is switched between Block and Flex, the left, center, and right alignments will remap to their respective CSS definitions. The "stretch" alignment will be removed when switching to a block container, as it's not supported.
Column Spacing & Sizing
Columns in both Block and Flex rows will now support margin in the Spacing Option Group and the standard Sizing Option Group.
Columns with Flex layout set have a Column Class option to define column width using flex column classes. You can find the new Column Class options in the Column's Design Tab → Sizing → Column Class.
Adding and Managing Columns in Flex Rows
Adding and removing columns in Flex rows works differently than in Block rows.
Adding Columns
Using the + Add New Column button in the Row's settings modal adds an empty Column with the same width class as the last column.
Cloning using the Clone button on an existing column in the Row's settings modal will clone the column, preserving all its existing settings as well as the containing module(s).
Removing Columns
Columns are simply deleted without affecting other columns. The remaining columns will occupy the space of the deleted column.
Example:
If on a 3-column layout, one of the columns is deleted, the layout will become a 2-column layout.
Dragging Between Block and Flex Containers
You can drag and drop items between containers with different layout types.
Dragging Rows:
Rows dragged into flex sections will have their default top and bottom padding removed.
Dragging Columns:
Dragging a column from a flex row to a block row will result in equal-width columns, and the flex class will be removed.
Dragging a column from a block row to a flex row will assign it the column class of the previous adjacent column.
Dragging Modules:
Modules dragged into flex rows will have their default bottom margin removed.
Switching Between Block and Flex Layouts
Block to Flex: The system will aim for minimal visual change, using a default Horizontal Column Spacing value instead of converting gutter width. Block column classes will map to new flex classes (e.g., 1/2 block class to 1/2 flex class). Custom CSS targeting block layout classes may cause visual changes.
Flex to Block: All columns will become equal width, similar to how columns behave when added or removed in the block layout. If a flex row has more than 6 columns, modules in columns beyond the sixth column will be moved to the sixth column of the block row. Nested rows will remain nested.