Welcome back to the Divi 5 Mastery Course. In Part 9, we built the core inner pages of the coworking website. Now, it’s time to dig deeper into the Flexbox Layout System that helped make those pages possible.
Divi 5 brings Flexbox controls directly into the Visual Builder, so you can manage spacing, alignment, wrapping, and distribution without writing custom CSS. In this post, you’ll learn how Flexbox works in Divi 5, what each major layout setting does, and how to build a simple responsive layout using those settings.
By the end, you’ll understand the main Flexbox settings and know how to use them to create cleaner, better-aligned sections across breakpoints.
The Power Of Flexbox In Divi 5
Flexbox is best for one-dimensional layouts. That means it arranges items primarily in a row or a column while giving you control over alignment, spacing, distribution, wrapping, and order.
Throughout the coworking website, Flexbox helps power navigation bars, feature rows, testimonial cards, pricing tables, hero content, event rows, and more. 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 > Layout option group for layout elements such as sections, rows, columns, and groups. These controls also work with your Design Variables and Presets, so spacing and layout choices can stay consistent across the site.
