If you’re designing with Divi, the new Flexbox layout system in Divi 5 is a game changer. It lets you create modern, responsive divi layouts without needing custom code or CSS hacks. In this guide, you’ll learn everything about Divi 5 Flexbox in easy words, with examples and embedded video tutorials from Elegant Themes.

What is Flexbox?

Flexbox stands for Flexible Box Layout. It’s a CSS technique that helps you organize content inside a container in a flexible, responsive way. Items can adjust their size, wrap to new lines, or even switch positions on different devices—without writing a single line of CSS.

Why Flexbox Matters in Divi 5

In Divi 4, layout design relied heavily on fixed rows and columns. If you wanted vertical centering, equal height cards, or responsive layouts, you often needed multiple workarounds.

Divi 5 fixes all of that. With Flexbox, you get:

• Better control of layout direction and alignment

• Built-in spacing (no more custom margins)

• Wrapping for responsive design

• Easy content reordering per device

? Think of it as “smart layout mode” for Divi.

Watch the Official Overview of Flexbox in Divi 5

How to Enable Flexbox in Divi 5

Open any Section, Row, or Column in the Divi Builder.

Go to the Design tab.
Find the Layout settings.
Switch the Layout Style to Flex.

Once enabled, you’ll see Flex controls like Direction, Gap, Justify Content, Align Items, Wrap, and Order.

Understanding Flexbox Controls (One by One)

1. Layout Direction

Decides how items flow:

• Row (left to right)

• Column (top to bottom)

• Row Reverse / Column Reverse

| Use case: Display icons in a row on desktop, then in a column on mobile.

2. Gap (Spacing)

Instead of manually adding margin between modules, Flexbox gives you:

• Horizontal Gap: spacing between side-by-side items

• Vertical Gap: spacing between stacked items

| Use case: Clean, consistent spacing between columns or cards.

3. Justify Content (Main Axis)

Aligns items horizontally (or vertically if in a column):

• Start

• Center

• End

• Space Between

• Space Around

• Space Evenly

| Use case: Center a row of buttons or distribute items evenly.

4. Align Items (Cross Axis)

Controls vertical alignment:

• Align items to top, center, bottom, or stretch them equally

| Use case: Vertically center content inside columns.

5. Wrap

Lets content flow to a new line if there isn’t enough space.

Options:

• No Wrap

• Wrap

• Reverse Wrap

| Use case: Wrapping a row of logos or cards on smaller screens.

6. Order

Reorders modules or columns. You can set different order values for desktop, tablet, and mobile.

| Use case: Place the image above text on mobile, but below on desktop.

Deep Dive: How to Use Flexbox Controls

Practical Examples Using Flexbox

Now that you understand the basic settings, let’s look at how to use Flexbox in real-world layouts. These examples will help you see how simple and powerful Divi 5’s Flex system can be when designing responsive websites.

We’ll go through four practical layout examples that are commonly used—like buttons in a row, a responsive icon grid, a hero section, and changing the order of content on mobile.

Example 1: Centered Button Row

Let’s say you want to place three buttons in a single row and center them perfectly. In older versions of Divi, this might require custom spacing or even CSS. But with Flexbox, it’s very easy.

? How to do it:

• Create a single-column row.

• Add three Button modules inside the column.

• Open the Column Settings.

• Go to the Design tab > Layout, and turn on Flex.

• Set:

  • Direction to Row

  • Justify Content to Center

  • Gap to 20px (this adds space between the buttons)

| Result:

All three buttons will line up horizontally in the center, with equal spacing between them—no need to manually adjust margins.

Example 2: Icon Grid That Wraps

Let’s create a grid of icons (or blurbs) that looks nice on desktop and automatically wraps on mobile screens.

? How to do it:

• Add a Row and place six Blurb or Image modules inside it.

• Go to the Row Settings, and enable Flex under the Layout section.

• Set:

  • Direction to Row

  • Wrap to Wrap

  • Horizontal and Vertical Gap to 30px

| Result:

On desktop, the icons will appear in a horizontal row. But on smaller screens, they’ll automatically move to the next line (wrap), keeping the design responsive and neat—without stacking them manually or using extra rows.

Example 3: Hero Section with Text and Image

The hero section is often the first thing visitors see. A common layout includes a heading, paragraph, and button on the left, and an image on the right. We want the two sides to align vertically in the center for a clean and modern look.

? How to do it:

• Add a two-column row.

• In the left column, add:

  • A Text module (for heading and paragraph)

  • A Module Group with one or two Button modules

• In the right column, add an Image module.

• Open the Row Settings, enable Flex, and set:

  • Direction to Row

  • Align Items to Center

  • Gap to 40px

| Result:

The text and image will sit side by side and align perfectly in the vertical center of the row, giving your hero section a professional and well-balanced appearance.

Example 4: Reorder Items on Mobile

Sometimes you want to show content in a different order depending on the device. For example, on desktop you may want the text on the left and the image on the right—but on mobile, you want the image to appear first.

With Divi 5 Flexbox, this can be done using the Order setting—no need to duplicate sections or hide elements.

? How to do it:

• Create a two-column layout with:

  • Text in the first column

  • Image in the second column

• Open the settings for each Column, go to Advanced → Order.

• Set:

  • On Desktop: Text = 1, Image = 2

  • On Mobile: Text = 2, Image = 1

| Result:

Your layout will automatically rearrange based on the screen size. The image will appear above the text on mobile, and next to it on desktop—all using a few clicks.

This is especially useful for creating content sections that feel natural and user-friendly on mobile devices.

Watch More Real Examples in Action

? Bonus: Using Flex with Module Groups

You can also group multiple modules and apply Flex settings to the group.

Steps:

Select multiple modules → click “Group”
Enable Flex on the Group
Adjust Direction, Gap, and Alignment

| Use case: Two buttons side by side inside a column.

Flex + Responsive = Power Combo

Flex settings can be customized per device:

• Change direction on mobile

• Reorder content without hiding it

• Adjust spacing for small screens

It’s the cleanest way to build mobile-friendly websites in Divi.

? Pro Tips for Using Flexbox Like a Pro

✅ Everything is built visually.
✅ Everything is customizable per screen.
✅ Everything is way faster than before.

Use the embedded video guides from Elegant Themes to visually follow along as you practice.