{"id":219298,"date":"2026-07-17T15:29:37","date_gmt":"2026-07-17T20:29:37","guid":{"rendered":"https:\/\/spritz.dev\/divi\/?page_id=219298"},"modified":"2026-07-17T15:29:37","modified_gmt":"2026-07-17T20:29:37","slug":"mastering-flexbox","status":"publish","type":"page","link":"https:\/\/spritz.dev\/divi\/mastering-flexbox\/","title":{"rendered":"Mastering Flexbox"},"content":{"rendered":"
\n
\n
\n

DIVI 5 \u2022 FLEXBOX DEMO<\/p>\n<\/div><\/div>\n\n

Build fluid layouts without writing a single line of CSS<\/h1><\/div><\/div>\n\n

This page demonstrates every major flexbox setting available in Divi 5 \u2014 from direction and alignment to wrapping and gap control.<\/p>\n<\/div><\/div>\n\n

\n
Discover Divi 5<\/a><\/div>\n\n
Read The Feature Release<\/a><\/div>\n<\/div>\n<\/div>\n\n
\n

layout direction: row \u00b7 gap: 10px<\/p>\n<\/div><\/div>\n\n

\n

flex: 1<\/p>\n<\/div><\/div>\n\n

flex: 2<\/p>\n<\/div><\/div>\n\n

flex: 3<\/p>\n<\/div><\/div>\n<\/div>\n\n

LAYOUT direction: column \u00b7 align-items: stretch<\/p>\n<\/div><\/div>\n\n

\n

align-items: stretch<\/p>\n<\/div><\/div>\n\n

flex: 1<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n
Flexbox Property<\/h5><\/div><\/div>\n\n

Layout Direction<\/h2><\/div><\/div>\n\n

Controls the direction of a column or row.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

row<\/p>\n<\/div><\/div>\n\n

Items align from left to right (start to end).<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

row-reverse<\/p>\n<\/div><\/div>\n\n

Items align from left to right (end to start).<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n

column<\/p>\n<\/div><\/div>\n\n

Items align from top to bottom.<\/p>\n<\/div><\/div>\n<\/div>\n\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n
\n

column<\/p>\n<\/div><\/div>\n\n

Items align from bottom to top.<\/p>\n<\/div><\/div>\n<\/div>\n\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n
Flexbox Property<\/h5><\/div><\/div>\n\n

Justify Content<\/h2><\/div><\/div>\n\n

Controls how flex items are distributed along the main axis of a row or column.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

flex-start<\/p>\n<\/div><\/div>\n\n

items packed to the start<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

flex-center<\/p>\n<\/div><\/div>\n\n

items centered on the axis<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

flex-end<\/p>\n<\/div><\/div>\n\n

items packed to the end<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

space-between<\/p>\n<\/div><\/div>\n\n

first & last touch edges, even gaps between<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

space-around<\/p>\n<\/div><\/div>\n\n

equal space around each item<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

space-evenly<\/p>\n<\/div><\/div>\n\n

equal space between all items and edges<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n
Flexbox Property<\/h5><\/div><\/div>\n\n

Align Items<\/h2><\/div><\/div>\n\n

Controls cross-axis alignment \u2014 how items sit vertically when the row direction is horizontal.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n\n

flex-start<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n\n

center<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n\n

flex-end<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n<\/div>\n\n

stretch<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n
Flexbox Property<\/h5><\/div><\/div>\n\n

Layout Wrapping<\/h2><\/div><\/div>\n\n

flex-wrap: wrap lets items flow onto new lines.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

layout wrapping: wrap<\/p>\n<\/div><\/div>\n\n

horizontal gap: 10px<\/p>\n<\/div><\/div>\n\n

vertical gap: 10px<\/p>\n<\/div><\/div>\n\n

items reflow at natural widths<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n\n

4<\/p>\n<\/div><\/div>\n\n

5<\/p>\n<\/div><\/div>\n\n

6<\/p>\n<\/div><\/div>\n\n

7<\/p>\n<\/div><\/div>\n\n

8<\/p>\n<\/div><\/div>\n\n

9<\/p>\n<\/div><\/div>\n\n

10<\/p>\n<\/div><\/div>\n\n

11<\/p>\n<\/div><\/div>\n\n

12<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

layout wrapping: wrap<\/p>\n<\/div><\/div>\n\n

column class: 1\/3<\/p>\n<\/div><\/div>\n\n

horizontal & vertical gap: 10px<\/p>\n<\/div><\/div>\n\n

six column row set to wrap.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n
Flexbox Property<\/h5><\/div><\/div>\n\n

Align Content<\/h2><\/div><\/div>\n\n

Controls how wrapped lines are distributed along the cross axis \u2014 but only works when items actually wrap onto more than one line.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

layout wrapping: wrap<\/p>\n<\/div><\/div>\n\n

height: 180px<\/p>\n<\/div><\/div>\n\n

horizontal & vertical gap: 10px<\/p>\n<\/div><\/div>\n\n

required for align-content to have any effect<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

stretch:<\/p>\n<\/div><\/div>\n\n

lines occupy full height <\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n\n

4<\/p>\n<\/div><\/div>\n\n

5<\/p>\n<\/div><\/div>\n\n

6<\/p>\n<\/div><\/div>\n\n

7<\/p>\n<\/div><\/div>\n\n

8<\/p>\n<\/div><\/div>\n\n

9<\/p>\n<\/div><\/div>\n\n

10<\/p>\n<\/div><\/div>\n\n

11<\/p>\n<\/div><\/div>\n\n

12<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

flex-start:<\/p>\n<\/div><\/div>\n\n

lines packed to the top<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n\n

4<\/p>\n<\/div><\/div>\n\n

5<\/p>\n<\/div><\/div>\n\n

6<\/p>\n<\/div><\/div>\n\n

7<\/p>\n<\/div><\/div>\n\n

8<\/p>\n<\/div><\/div>\n\n

9<\/p>\n<\/div><\/div>\n\n

10<\/p>\n<\/div><\/div>\n\n

11<\/p>\n<\/div><\/div>\n\n

12<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

center:<\/p>\n<\/div><\/div>\n\n

lines centered vertically<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n\n

4<\/p>\n<\/div><\/div>\n\n

5<\/p>\n<\/div><\/div>\n\n

6<\/p>\n<\/div><\/div>\n\n

7<\/p>\n<\/div><\/div>\n\n

8<\/p>\n<\/div><\/div>\n\n

9<\/p>\n<\/div><\/div>\n\n

10<\/p>\n<\/div><\/div>\n\n

11<\/p>\n<\/div><\/div>\n\n

12<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

flex-end:<\/p>\n<\/div><\/div>\n\n

lines packed to the bottom<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n\n

4<\/p>\n<\/div><\/div>\n\n

5<\/p>\n<\/div><\/div>\n\n

6<\/p>\n<\/div><\/div>\n\n

7<\/p>\n<\/div><\/div>\n\n

8<\/p>\n<\/div><\/div>\n\n

9<\/p>\n<\/div><\/div>\n\n

10<\/p>\n<\/div><\/div>\n\n

11<\/p>\n<\/div><\/div>\n\n

12<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

space-between:<\/p>\n<\/div><\/div>\n\n

first & last lines touch edges<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n\n

4<\/p>\n<\/div><\/div>\n\n

5<\/p>\n<\/div><\/div>\n\n

6<\/p>\n<\/div><\/div>\n\n

7<\/p>\n<\/div><\/div>\n\n

8<\/p>\n<\/div><\/div>\n\n

9<\/p>\n<\/div><\/div>\n\n

10<\/p>\n<\/div><\/div>\n\n

11<\/p>\n<\/div><\/div>\n\n

12<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

space-around:<\/p>\n<\/div><\/div>\n\n

equal space around each line<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n\n

4<\/p>\n<\/div><\/div>\n\n

5<\/p>\n<\/div><\/div>\n\n

6<\/p>\n<\/div><\/div>\n\n

7<\/p>\n<\/div><\/div>\n\n

8<\/p>\n<\/div><\/div>\n\n

9<\/p>\n<\/div><\/div>\n\n

10<\/p>\n<\/div><\/div>\n\n

11<\/p>\n<\/div><\/div>\n\n

12<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

space-evenly:<\/p>\n<\/div><\/div>\n\n

perfectly even gaps throughout<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

1<\/p>\n<\/div><\/div>\n\n

2<\/p>\n<\/div><\/div>\n\n

3<\/p>\n<\/div><\/div>\n\n

4<\/p>\n<\/div><\/div>\n\n

5<\/p>\n<\/div><\/div>\n\n

6<\/p>\n<\/div><\/div>\n\n

7<\/p>\n<\/div><\/div>\n\n

8<\/p>\n<\/div><\/div>\n\n

9<\/p>\n<\/div><\/div>\n\n

10<\/p>\n<\/div><\/div>\n\n

11<\/p>\n<\/div><\/div>\n\n

12<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n
LAYOUT EXAMPLE \u2022 Layout Direction<\/h5><\/div><\/div>\n\n

Blog\n<\/h2><\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

layout direction: row<\/p>\n<\/div><\/div>\n\n

layout direction: row<\/p>\n<\/div><\/div>\n\n

horizontal gap: 4%<\/p>\n<\/div><\/div>\n\n

vertical gap: 5%<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
<\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n
\n
\n

JD<\/p>\n<\/div><\/div>\n\n

Jordan Davis<\/strong>
May 28, 2026 \u2022 8 min read<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

Why flexbox changed everything in Divi 5<\/h3><\/div><\/div>\n\n
\n
Divi 5<\/a><\/div>\n\n
Flexbox<\/a><\/div>\n<\/div>\n\n

Before Divi 5, achieving complex layouts required workarounds and custom CSS. Now, the native flexbox engine gives you fine-grained control directly inside the visual builder \u2014 with full responsive breakpoint support baked in from the start.<\/span><\/p>\n<\/div><\/div>\n\n

Tip: Set Layout Wrapping > Wrap<\/strong> on any row module to create automatically responsive grids without breakpoint overrides.<\/p>\n<\/div><\/div>\n\n

With Divi's flexbox integration, you can easily manage layout direction to control how design elements are arranged in rows or columns, enhancing the visual flow and user experience. This feature allows for smooth adjustments in alignment and spacing to suit various screen sizes, empowering designers to craft dynamic and responsive layouts that look stunning on any device, ensuring your content stands out in every scenario.<\/p>\n<\/div><\/div>\n\n

Read More<\/a><\/div>\n<\/div>\n\n
\n
\n

TOPICS<\/h4><\/div><\/div>\n\n
\n
Layout<\/a><\/div>\n\n
Flexbox<\/a><\/div>\n\n
Alignment<\/a><\/div>\n\n
Responsive<\/a><\/div>\n\n
Divi 5<\/a><\/div>\n\n
CSS<\/a><\/div>\n<\/div>\n<\/div>\n\n
\n

QUICK STATS<\/h4><\/div><\/div>\n\n
\n

CSS Properties Covered<\/p>\n<\/div><\/div>\n\n

12<\/p>\n<\/div><\/div>\n<\/div>\n\n

<\/div><\/div>\n\n
\n

Demo Sections<\/p>\n<\/div><\/div>\n\n

6<\/p>\n<\/div><\/div>\n<\/div>\n\n

<\/div><\/div>\n\n
\n

Reading time<\/p>\n<\/div><\/div>\n\n

8 min<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n
LAYOUT EXAMPLE \u2022 JUSTIFY CONTENT<\/h5><\/div><\/div>\n\n

Hero<\/h2><\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

justify content: space-between<\/p>\n<\/div><\/div>\n\n

layout direction: row<\/p>\n<\/div><\/div>\n\n

layout wrapping: wrap (mobile only)<\/p>\n<\/div><\/div>\n\n

vertical gap: 0px<\/p>\n<\/div><\/div>\n\n

align items: center<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
<\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

Push Content to the Edges \u2014 Effortlessly<\/h2><\/div><\/div>\n\n

With justify-content: space-between, Divi 5 automatically distributes your modules across the full width of a row \u2014 no manual spacing, no custom CSS. Items sit flush at each edge with perfectly even gaps in between.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

<\/span>%<\/span><\/p><\/div>

UPTIME<\/h3><\/div>\n\n

<\/span><\/span><\/p><\/div>

USERS<\/h3><\/div>\n\n

<\/span><\/span><\/p><\/div>

COUNTRIES<\/h3><\/div>\n\n

<\/span><\/span><\/p><\/div>

SUPPORT<\/h3><\/div>\n\n

<\/span><\/span><\/p><\/div>

RATINGS<\/h3><\/div>\n\n

<\/span><\/span><\/p><\/div>

YEARS<\/h3><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n
\n
\n
\n
LAYOUT EXAMPLE \u2022 ALIGN ITEMS<\/h5><\/div><\/div>\n\n

Pricing Tables<\/h2><\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

align items: end<\/p>\n<\/div><\/div>\n\n

horizontal gap: 20px<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
<\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n
\n
STARTER<\/h5><\/div><\/div>\n\n
\n

$9<\/h3><\/div><\/div>\n\n

\/mo<\/p>\n<\/div><\/div>\n<\/div>\n\n

Perfect for personal projects and small sites.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n