Divi introduces Flexbox to give you more powerful and flexible layout control. This guide walks through the key parts of the Flexbox system so you can make the most of it - whether you’re new to Divi or already building with it.
What is Flexbox in Divi?
Flexbox is a new layout system built into Divi that makes it easier to arrange and align items inside containers. You can use it in Sections, Rows, Columns, and Module Groups.
Getting started with the new Flexbox Layout
Click Add New Row (in a section) to see new row templates - including nested multi-row layouts that give you more variety and control.
The templates are helpful starting points, not limits. After adding a row, open its settings and go to Design → Layout to customize it.
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: Flex layout is now the default setting for all new elements.
Legacy Divi 4 Elements: Existing elements on your pages continue to use the Block layout
Switching Layouts: You can switch between Flex and Block layouts at any time.
Full Width and Specialty Sections: These remain supported in Divi 4 layouts and migrated layouts, but can no longer be added through the Add Section panel. If your layout already includes Fullwidth or Specialty Sections, they’ll continue to work normally, and you can still edit them.
Flex Layout Options
When you select Flex as the layout type, new layout options appear in the Layout group:
Horizontal Gap (
column-gap): Controls the horizontal spacing between elements.Vertical Gap (
row-gap): Controls the vertical spacing between elements.Layout Direction (
flex-direction): Defines how items flow inside the container:Row
: Left to rightRow Reverse
: Right to leftColumn
: Top to bottomColumn Reverse
: Bottom to top
Justify Content (
justify-content):Note: This setting only affects layouts where a custom height, min-height, or max-height is defined.
Start
: Aligns items to the left or top edge.Center
: Aligns items to the center.End
: Aligns items to the right or bottom edge.Space between
: Aligns the first item to the left/top and the last item to the right/bottom, with equal space between all items.Space Around
: Adds equal space around each item - outer margins are half the size of inner gaps.Space Evenly
: Keeps spacing uniform between and around all items.
Align Items (
align-items):Start
: Aligns items to the left or top edge.Center
: Aligns items to the center.End
: Aligns items to the right or bottom edge.Stretch
: Expands items to fill the width or height of the container.
Layout Wrapping (
flex-wrap):No Wrap(default)
: Items stay on one line and do not wrap.Wrap
: Moves items to the following line if the container isn’t wide enough.Wrap Revers
: Moves items to the following line in reverse order if space runs out.
Wrapping Alignment (
align-content) - Only visible when Layout Wrapping is enabled.Stretch
: Expands items equally along the cross-axis to fill the container space while respecting any max-width or max-height limits.Start
: Packs items tightly against the start edge of the container.Center
: Centers all items along the cross-axis.End
: Packs items at the end of the container along the cross axis.Space Between
: Evenly distributes items along the cross axis. The first aligns to the start, and the last aligns to the end.Space Around
: Adds equal space around each item; outer margins are half the size of the inner gaps.Space Evenly
: Keeps equal spacing between items and container edges.
New Order Option Group
Items in a Flex container now include a new Order option group, found in the Content tab (above Admin Label). Enter a number to control the order in which each item appears.
Flex CSS Framework
Flexbox Rows use a new column framework with class-based column widths. This system uses calc() with CSS variables for gutter width, making column sizes automatically adjust based on user-defined gutters and any CSS unit.
Alignment Differences: Block vs. Flex Containers
Block Containers: Items in Block containers use margin for alignment (for example, margin-left: auto to center an item).
Flex Containers: Items in Flex containers use align-self for alignment (for example, align-self: center for centering). Flex containers also include a Stretch option, which is selected by default.
Layout Switching Alignment: When switching a parent container between Block and Flex, existing left, center, and right alignments automatically map to their matching CSS rules. The Stretch alignment is removed when switching to Block since it isn’t supported.
Column Spacing & Sizing
Columns in both Block and Flex rows now support Margin in the Spacing option group and standard Sizing controls.
Columns using the Flex layout include a Column Class option that defines column width using Flex classes. You’ll find this under Design → Sizing → Column Class.
Adding and Managing Columns in Flex Rows
Adding or removing columns in Flex Rows works differently from Block Rows.
Adding Columns
Clicking + Add New Column in the row settings adds an empty column with the same width class as the last column.
Clicking Clone on an existing column duplicates it, keeping all settings and contained modules.
Removing Columns
Removing a column doesn’t change the width of the remaining ones. To resize them, use Design → Sizing → Column Class for each remaining column.
Example:
For example, if you delete one column from a three-column row, the remaining two will still keep their original widths. To make them equal, edit both and set Design → Sizing → Column Class to 1/2.
Dragging Between Block and Flex Containers
You can drag and drop items between containers that use different layout types.
Dragging Rows:
When you drag a row into a Flex Section, its default top and bottom padding is automatically removed.
Dragging Columns:
Moving a column from a Flex Row to a Block Row creates equal-width columns and removes the Flex class.
Moving a column from a Block Row to a Flex Row assigns it the same Column Class as the column before it.
Dragging Modules:
When you drag modules into Flex Rows, their default bottom margin is automatically removed.
Switching Between Block and Flex Layouts
Block to Flex: When converting from Block to Flex, Divi minimizes visual changes by applying default Horizontal Column Spacing instead of converting gutter width. Block classes map to new Flex classes (for example,
1/2Block →1/2Flex). If you use custom CSS targeting Block classes, visual differences may occur.Flex to Block: When converting from Flex to Block, all columns reset to equal width, similar to how Block layouts handle added or removed columns. If a Flex Row contains more than six columns, any modules in columns beyond the sixth are moved into the sixth column. Nested Rows remain nested.