Centering or aligning text on the vertical axis (up and down) has always been difficult to achieve.

There are a number of solutions to this, including the use of CSS floats or Javascript. It’s probably fair to say that all solutions have their drawbacks and the one proposed in this article is no different in that regard.

The following post aims to give you a vertical alignment solution using Flexbox.

What is Flexbox?

How to Vertically Align Divi Elements with Flexbox

To begin, create a new page or post and use the Divi Builder to set up a section, with a single row and 3 columns.

Then, add three blurb modules and three button modules below them.

Next, add some dummy content to the modules and hit Preview. The front end should look similar to the image below: 

Note: For this demonstration, I’ve added a border around each column to show where the borders are. It’s important to make the distinction early on that for this article we are only dealing with 2 modules per column.

Add a CSS Class name to the row (green section) so that we can target it and the 3 columns. To do this, click on the hamburger menu of the Row, navigate to the Advanced Tab and enter flex-row-wrapper into the CSS Class box.

Next, we’ll write a bit of CSS code to target the element with the class of flex-row-wrapper. Copy the code below and paste it into either:

• The CSS section of your page ie: using Stylebot or the Inspect tool,
• The Custom CSS box in the Divi Theme Options page, or preferably,
• To your child theme stylesheet.  

.flex-row-wrapper {
 display: flex;
 }

Once you’ve added the CSS, refresh the page if necessary and see the result.

With just one single line of CSS, you’ve achieved equal row heights and a uniform-looking layout!

At this point, we can add extra CSS to make the design look even better.

In our back-end set up, the Row module is referred to as the parent and the three columns are referred to as the children or Flex items.

Applying the same conventions further, the objects within the children are the grand-children. In this instance, the grandchildren of each column are the blurb module and the button module.

An important rule of Flexbox is that the parent doesn’t apply to its grand-children so the next step is to target each of the children and make them flex as well.

Using your browser’s Developer Tool, inspect the page elements to identify the column class names by right-clicking on the module.

When I target the row with its class name of ‘flex-row-wrapper’ I can see these CSS Class names for each column.

I’m going to choose a class name for each that is the same across all three.  

Here, I can choose either .et_pb_column or .et_pb_column_1_3. I’m choosing .et_pb_column because to me it’s more generic and might make it easier to use the same CSS in different modules should I want to repeat this functionality again.

To target these children of the green row I use the following CSS and set the display to ‘flex’.  Note I’m using the parent CSS Class name to limit this otherwise we might change columns across the site!

.flex-row-wrapper .et_pb_column{
 display: flex;
}

After adding this CSS to the stylesheet or similar, you should see the following result:

When adding the CSS rule display:flex; it sets the direction to the row by default. To rectify this, we can change the direction of the content to make the children elements display down the column.

To do so, we add another flex command to change the direction.  Let’s also add some padding as well.

.flex-row-wrapper .et_pb_column {
 display: flex;
 flex-direction: column;
 padding: 20px;
}

Now, we are back to where we were before,  but what’s different?  

The children-elements are now flex enabled which means that we can apply additional flex rules to their children (the grand-children elements).  

There is one more flex command to add now and it’s the magic ticket: justify-content: space-between;  

This command spreads the objects out equally across the axis. It also pushes the first object to the start and the last object to the end.

.flex-row-wrapper .et_pb_column {
 display: flex;
 flex-direction: column;
 padding: 20px;
 justify-content: space-between;  
}

And voilà!  Like magic, just a few lines of CSS will transform our Divi modules into equal row heights.

The complete code looks like this:

.flex-row-wrapper {
 display: flex;
}
 
.flex-row-wrapper .et_pb_column {
 display: flex;
 flex-direction: column;
 padding: 20px;
 border: 1px solid black;
 justify-content: space-between;
}

Adding Media Queries to Our Flexbox Example

Earlier in the post, I mentioned that certain flex commands may override other CSS styling and that some flex-enabled elements may require more attention in terms of screen responsiveness.

As in our example, when you add the CSS command of display:flex; you are instructing the DOM to ignore the float status for the parent item and its immediate child.   

With this, any pre-existing CSS that changes the style of the item(s) when the viewport (screen size) changes needs to be re-visited. To see this in action, grab the side of your browser and resize the screen to a smaller viewport and look at the flex-enabled elements.  

To solve this, we will need to use media queries and add another line of code. Note:  You may need to experiment with this or even add more media queries in to adapt to different screen sizes, but this code seems to works for me and is pretty much what DIVI does.

@media screen and (max-width: 981px) {
  .flex-row-wrapper  { 
   flex-direction:column;
}
}

Conclusion

With only a few lines of CSS, we’ve successfully employed a flexible solution to the age-old issue of different size containers.

If you’d like to experiment further, I suggest trying the same example with 2 or 4 columns. It should work the same way, just be sure to adjust the browser width and check that it looks ok on smaller screens. Experiment with the @media rules and don’t be afraid to set some more of these as necessary. For more information on using @media queries with Divi, read our blog post.  And don’t forget that you can experiment with all of this using Stylebot in your browser.

We want to hear from you!

We hope that you’ve enjoyed reading this blog post on using CSS with Flexbox. If you have any queries or comments, add them below – we love receiving your feedback.

Thanks for reading!