Divi 5 brings Flexbox controls directly into the Visual Builder, so you can manage spacing, alignment, wrapping, and distribution without writing custom CSS.
This part of the Divi 5 Mastery Course explains how Flexbox works in Divi 5, what each major layout setting does, and how to build a simple responsive layout. It builds on the coworking website you started in earlier parts, including the inner pages from Building the core inner pages of your Divi 5 website.
The Power of Flexbox in Divi 5
Flexbox is best for one-dimensional layouts. It arranges items primarily in a row or a column while giving you control over alignment, spacing, distribution, wrapping, and order. Across the coworking website, Flexbox helps power navigation bars, feature rows, testimonial cards, pricing tables, hero content, and event rows. It is especially useful when elements need to line up cleanly or respond gracefully as the screen size changes.
In Divi 5, Flexbox settings live in the Design tab under the Layout option group for layout elements such as sections, rows, columns, and groups, and for individual modules.
These controls also work with your Design Variables and Presets, so spacing and layout choices stay consistent across the site.
Flexbox Settings in the Divi 5 Interface
Click on any element in your page layout.
Go to the Desing tab.
Expand the Layout option group to reveal the available controls. Here is what each setting does.
Layout Style
The Layout Style setting lets you choose between Block, Flex, and CSS Grid, depending on the element and layout you are editing.
Block is the more traditional style, useful for simpler stacked layouts and legacy content.
Flex (default Layout Style value) is the style this article focuses on because it is ideal for row-based and column-based alignment.
CSS Grid is better for two-dimensional layouts where you need control over rows and columns at the same time.
To work with Flexbox, select Flex under Layout Style. Once Flex is selected, the Flexbox-related settings appear below.
Horizontal and Vertical Gap
Divi 5 includes built-in Horizontal Gap and Vertical Gap controls for spacing between child elements.
Instead of adding custom margin or padding to every module, you set spacing once at the container level.
Horizontal Gap controls the space between items placed side by side, and
Vertical Gap controls the space between items stacked top to bottom.
Both fields support a vast range of unit selection, and you can apply Design Variables such as the spacing values created earlier in the course. Using these gap controls is one of the simplest ways to keep spacing consistent across rows, columns, and groups.
Layout Direction
Layout Direction controls the main axis of a Flex container, determining the direction child elements flow:
Row (default): Items flow horizontally from left to right.
Row Reverse: Items flow horizontally from right to left.
Column: Items flow vertically from top to bottom.
Column Reverse: Items flow vertically from bottom to top.
Switching from Row to Column is one of the most common Flexbox changes you will make.
For example, a row of feature blurbs can sit side by side on desktop and stack vertically on smaller screens by changing the direction at the appropriate breakpoint.
Justify Content
Justify Content controls how items are distributed along the main axis. With Layout Direction set to Row, it controls horizontal distribution; set to Column, it controls vertical distribution.
Start: Aligns items to the beginning of the main axis.
Center: Centers items along the main axis.
End: Aligns items to the end of the main axis.
Space Between: Distributes items with space between them and none at the outer edges.
Space Around: Adds space around each item.
Space Evenly: Adds equal space between items and at the outer edges.
Space Between works well for headers and navigation layouts where you want a logo on one side and buttons or links on the other.
Align Items
Align Items controls how child elements align along the cross-axis. In Row direction, it controls vertical alignment; in Column direction, it controls horizontal alignment.
Start: Aligns items to the start of the cross-axis.
Center: Centers items along the cross-axis.
End: Aligns items to the end of the cross-axis.
Stretch: Stretches items across the available cross-axis space.
Stretch is especially useful for card layouts, helping child elements match the available height so cards look balanced when content lengths vary.
Layout Wrapping
Layout Wrapping determines whether Flex items stay on one line or wrap to additional lines when there is not enough room.
No Wrap: Keeps items on a single line.
Wrap: Allows items to move to additional lines when space runs out.
Wrap Reverse: Allows items to wrap in the reverse direction.
Wrapping is important for responsive design because it lets layouts adapt as the available width changes. A row of cards can appear in multiple columns on desktop and wrap into fewer columns on smaller screens.
Align Content
Align Content controls how wrapped lines align along the cross-axis when there is extra space in the container. It only becomes relevant when Layout Wrapping is set to Wrap or Wrap Reverse and the container has multiple lines. Its options mirror Justify Content: Stretch, Start, Center, End, Space Between, Space Around, and Space Evenly.
Build a Three-Column Layout with Flexbox
You can use these settings to create a simple three-column layout.
Add a new three-column Row to a page.
On the Design tab, expand the Layout option group and confirm that Flex is selected in Layout Style.
Set the Row Gap
Hover over the Horizontal Gap field to reveal the Insert Dynamic Content icon.
Select the Spacing – Medium variable from the list and apply it.
Repeat the same process for the Vertical Gap field.
Style the Columns
With the Row still selected, go to the Content tab → Elements.
Click on the Edit icon for the first column.
Go to the Design tab.
Expand the Spacing option group.
Click the Link icon in the Padding field so all four sides stay connected.
Use the Insert Dynamic Content icon to apply the Spacing – Small variable.
Hover over the Border option group to reveal the Assign Presets icon.
Assign the Outlined – Dark preset.
Copy Column Styles with Attributes
Use Divi's right-click Attributes menu to apply the first Column's styles to the rest.
Right-click the first Column in the canvas and select Copy Attributes.
Select the second column, right-click on it, and select Paste Attributes, then choose Paste Column Design Attributes.
Right-click the third Column and paste the same design attributes again.
Add Content to the Columns
In the first Column, add a Group module.
Inside the Group, add two Heading modules, one Text module, and one Divider module.
Outside the Group, but still inside the first Column, add an Icon List module and a Button module.
For the Divider module, create an element preset named Pricing Divider and set the following styles:
Desing tab → Line → Line color, choose the Border - Dark variable.
Desing tab → Line → Line Position, choose Vertically Centered.
Use the Presets and Design Variables created earlier in the course to keep the design consistent:
For the first Heading module, apply the Heading 5 element preset.
For the second Heading module, apply the Heading 2 element preset.
For the Text module, apply the Dark Text element preset.
For each Icon List Item, create a new element preset, name it Dark List Item.
In the Desing tab → Icon → Icon, choose the Black color variable.
Fill the remaining Columns with similar content.
Adjust Group and Column Gaps
Open the settings of the Group module inside the first column.
Go to the Design tab,
Expand the Layout option group, and apply the Spacing – XSmall variable to Vertical Gap. Repeat for the remaining Groups.
Open the first Column's settings.
Go to the Design → Layout option group.
Apply the Spacing – Small variable to Vertical Gap.
Repeat for the remaining Columns.
Align the Buttons
The tops of the columns line up, but the Button modules at the bottom may not, because content lengths vary. To fix this:
Open Column's one settings.
Go to the Desing tab → Layout
Set Justify Content to Space Between
This keeps the Group module at the top of the Column and pushes the Button to the bottom. Repeat the same steps for the third column.
Make Responsive Adjustments
Check how the layout responds across screen sizes using Divi 5's Responsive Editor and Customizable Responsive Breakpoints.
To test more screen widths, open the breakpoint controls in the Top Bar and enable the breakpoints you need - Divi 5 supports up to seven.
Open the Row and cycle through the active breakpoints. When a breakpoint needs a structural change, use Apply Structure Template in the Elements option group to change the Row structure for that screen size.
You can also use the Responsive Editor to adjust Column alignment when columns stack.
Open a Column's settings.
Go to the Design tab → Layout option group
Hover over Align Items to reveal the Edit Responsive Values icon.
Set Align Items to Center at the relevant breakpoint.
Repeat for the remaining Columns.
Fine-Tune Column Widths
To control column widths at a breakpoint such as Tablet Wide:
Ensure that the Tablet Wide breakpoint is selected.
Open the Column settings.
Go to the Design tab → Sizing → Column Class field
Expand the dropdown and choose 1/2 from the available Column Class options.
Reorder Elements Responsively
To change display order responsively:
Switch to the desired breakpoint.
Open the third Column's Settings modal window.
From the Content → Order → Display Order.
Set the Display Order field's value to -1. This operation will move the third Column earlier in the Row's visual order at the breakpoint where that value is applied.
Tips and Best Practices
Start with gap controls. Use Horizontal Gap and Vertical Gap before adding custom margins to individual modules. Setting spacing at the container level creates more consistent rhythm.
Use Space Between for card layouts. Justify Content set to Space Between keeps content at the top of a card and a button near the bottom, which works well when cards have different amounts of text.
Use Stretch for equal-height cards. For feature blurbs, pricing cards, or service cards, set Align Items to Stretch on the parent container so child elements share a consistent height.
Use Design Variables for spacing. When gap, padding, and width values reference variables, layout updates are easier to manage later.
Download and Import Layouts
Read the full tutorial
Read the complete step-by-step guide on the Elegant Themes blog: Part 10: Mastering Flexbox in Divi 5.
Previous Course | Next Course |