One of the most valuable improvements in Divi 5 is its native Flexbox support. It gives you clean, visual control over layout structure directly inside the Visual Builder, reducing the need for custom CSS, duplicated sections, or manual spacing workarounds.
This is the first part of our Mastering Flexbox series. Throughout the series, we’ll introduce Flexbox in Divi 5, explore its settings in detail, and show how different controls work together to create functional, responsive designs. In Part 2, we’ll show you how to create equal-height cards with aligned buttons.
In this first part, we’ll focus on the settings available in the Layout option group when Flex is selected. These controls affect how child elements flow, wrap, align, and distribute space inside a parent container, making them some of the most important layout tools you’ll use in Divi 5.
What Is Flexbox In Divi 5?
Flexbox (Flexible Box Layout) is a CSS layout model designed to arrange, align, and distribute space between items inside a container, even when those items have different or dynamic sizes.
Before Divi 5, creating balanced layouts in Divi often meant relying on the traditional section > row > column structure, then fine-tuning spacing with margin, padding, or custom CSS. That approach worked, but it could make responsive alignment harder to manage across breakpoints.
Divi 5 changes this by bringing native Flexbox controls directly into the Visual Builder. Instead of writing CSS for common layout behavior, you can manage direction, spacing, wrapping, alignment, and ordering visually.
