Divi 5 Flexbox: Complete Guide to the New Layout System (With Examples)

The frustration of adjusting spacing, alignment, and layouts manually in Divi 4 is finally over!

You can now do all these with Divi 5 Flexbox built-in settings. That means no more dealing with custom CSS, extra rows, or frequent layout fixes.

Sound like a game-changer?

As you start using it, you will wonder how you ever built layouts without it. We will walk you through its features and show you how to put them into action.

What is Divi 5 Flexbox (In Case You Don’t Know)

Flexbox is a modern CSS layout system that makes it easy to arrange elements in rows or columns and control their spacing and alignment.

With Flexbox, you can:

• Arrange elements side by side or stack them on top of each other
• Align them in the center, to the left or right, or spread them out evenly
• Wrap items onto a new line when there isn’t enough space

All these are now built directly into Divi 5. In Divi 4, you could sometimes achieve similar results, but it usually required custom CSS and other workarounds.

Divi 5 Flexbox takes those complex layout challenges and turns them into simple settings anyone can use.

Key Features of Divi 5 Flexbox 

You already have an idea of Divi 5’s Flexbox, now let’s look at the key features that make it powerful in real-world design.

• Direction Control: Choose if your content flows side by side in a row or stacks vertically in a column. You can even reverse the order of elements when needed.
• Alignment: You can align items to the start, center, or end without relying on custom CSS or complicated spacing tricks.
• Gap Settings: Control the space between items with a single setting. You don’t have to apply individual margins and padding to each element.
• Wrapping: You can control if items stay on one line or wrap onto multiple lines when space is limited. This lets your layouts adjust across different screen sizes.
• Responsive Ordering: Change the order of elements on different devices without duplicating content or adding custom CSS. For example, place text before an image on mobile while keeping the desktop layout intact.
• Equal Column Height: Make all columns the same height, regardless of how much content each one has. This will keep your layouts balanced without extra CSS or messy spacing issues.

How Flexbox in Divi 5 Works

In Divi 5, Flexbox settings are available at the parent level, which means sections, rows, or columns. The parent item acts as the controller that defines how its child items like modules behave.

Have a look at the image to understand the concept:

For example, when you add modules to a row and adjust its Flex settings, the row becomes the flex container, and the modules (or columns within the row) act as flex items. This allows you to control the alignment, distribution, and ordering of those modules without custom CSS.

Similarly, when you apply Flexbox to a section, the section becomes the container, and the rows inside it act as flex items. This way, you can easily manage how rows align or spread out within a section.

How to Use Divi 5 Flexbox (Real Examples You Can Also Apply)

Divi 5 makes using Flexbox easy by placing the settings directly in the Design tab of parent elements like Sections, Rows, or Columns.

All you have to do is:

• Add child items (module) inside a parent element (section, row or column)
• Open the parent settings
• Go to Design > Layout > Layout Style > Flex

It’s that simple. To make things even easier, let’s look at a real example:

Example 1: Changing Module Layout from Vertical to Horizontal

Say you have three Blurb modules inside a single column, and by default, they display one below the other. 

What if you want them to sit side by side instead?

In Divi 4, this meant adding multiple columns just to force the modules next to each other. With Divi 5’s Flexbox, you can do it in just a few clicks:

• Add a Section > Row > Single Column
• Insert three Blurb modules inside that single column

• Click on Row settings and then Column settings

• In the Column settings go to design tab > Layout and select Flex

• Now set Layout Direction: Row

It’s that simple. Blurbs will now be displayed side by side in a single row, something like this:

Example 2: Centering Items Vertically

Imagine you have a row with one column and place a Heading, Text, and Button module inside. By default, they will align to the left.

But what if you want them to stay in the center?

In Divi 4, you had to open each module and change its alignment setting in the Design tab. With Divi 5’s Flexbox, you can do it in just a few clicks.

• Add a Section > Row > Single Column
• Insert Heading, Text, and Button modules

• Open Row Settings > Column Settings

• Go to Design tab > Layout and set Layout Style: Flex

• Set Layout Direction: Column and Align Items: Center

Now your content is perfectly centered vertically in the column. Here is the final output:

Example 3: Changing Direction & Alignment of Content for Mobile

For example, you have a row with eight columns and each one contains a Blurb module. They will display side-by-side in a single row on desktop, and by default stack into two columns per row on mobile, something like:

But what if you want one blurb per row on mobile? It’s easy with Divi 5’s Flexbox. Here is how:

• Click the device icon and switch to Phone view

• Click on Row settings > Design > Layout > Layout Style > Flex (flex will be selected by default)
• Set Layout Direction to Column

• Set Align Items to Center for centered blurbs (if you want the blurbs centered)

It may look simple with Flexbox, but in Divi 4 it’s not. You will need custom CSS (flex/float overrides with media queries) or even duplicate rows to get the same mobile layout in Divi 4.

Here is the final output:

Divi 5 Flexbox vs Old Divi Layouts

To help you see the difference at a glance, here is how Divi 4 and Divi 5 compare:

FAQs about Divi 5 Flexbox Layout System

• Is Divi 5 Flexbox beginner-friendly or do I need coding skills?

It’s very beginner-friendly. Divi integrates Flexbox controls directly into the visual builder, so you don’t need to write a single line of code.

• Does any module have flexbox settings?

Yes. You will find Flexbox settings in modules that contain child items. Some common modules with Flexbox include Accordion and Bar Counter.

• Can I convert my old Divi layouts to Flexbox in Divi 5?

Yes, you can convert your old Divi layouts to Flexbox in Divi 5. Divi 5 includes a new Flexbox layout system that allows you to switch between the traditional “Block” layout (from Divi 4) and the new “Flex” layout.

• Does using Flexbox in Divi 5 make websites faster?

Yes, it does.Flexbox reduces extra wrappers and CSS hacks, making layouts cleaner and lighter.

• Can I still use custom CSS with Flexbox in Divi 5 if I want advanced control?

Yes, absolutely. The built-in Flexbox controls are great, but you can still use custom CSS for more advanced or specific design needs.

• Does Flexbox work with all Divi modules, or only certain ones?

Flexbox works with all Divi modules. It is a layout system for rows and columns, so it affects how all modules within them are arranged.

• What happens if I don’t use Flexbox? Can I stick with the old system?

Yes. The old block system still works, but you’ll miss Flexbox’s easier spacing and responsiveness.

• Does Flexbox replace CSS Grid in Divi?

No, Flexbox is for one-dimensional layouts (rows/columns). Divi may integrate Grid in future, but Flexbox already covers 90% of common layout needs.

Final Thoughts

Throughout this guide, we tried to include everything about the Divi 5 flexbox. From what flexbox in Divi 5 is to why it matters, and how to use its settings, we included everything.

To make things even easier, we added some examples that will give you an idea of how to apply Divi 5’s Flexbox.

Now it’s up to you. Start experimenting with these settings and bring your layouts to life without relying on hacks or extra CSS.

If you face any issue, just comment below and we will be happy to help you out.

Happy designing with Divi 5!