Skip to main content

Understanding Flex Horizontal and Vertical Gap in Divi 5

Learn how to control the horizontal and vertical spacing between flex items using Divi 5's new Flexbox system.

Updated over a month ago

Divi 5 relies on native CSS Flexbox. The Horizontal Gap and Vertical Gap options control the space between flexbox items (horizontal and vertical).

In most common situations, the Horizontal and Vertical Gap options are set on the parent element.

Horizontal Gap

Control the space in between flexbox items on the horizontal axis.

Divi 5 - Flexbox - Horizontal Gap

  1. Edit the Row's settings.

  2. Go to the Design tab → Layout → Horizontal Gap.

  3. Change the default 5.5% value.

Vertical Gap

Control the space in between flexbox items on the vertical axis.

Divi 5 - Flexbox - Vertical Gap

  1. Edit the Row's settings.

  2. Go to the Design tab → Layout → Vertical Gap.

  3. Change the default 40px value.

  4. (optional) Change the Layout Direction to Column.

Note: You can use any of the accepted unit values.

Related Articles
Understanding Flex Justify Content in Divi 5
Understanding Flex Align Items Options in Divi 5
Understanding Flex Layout Wrapping Options in Divi 5
Understanding Flex Wrapping Alignment Options in Divi 5
Did this answer your question?