Equal height layouts with flexbox

Use flexbox to set equal heights for columns — even when each column has different content inside.

This video features an old UI. Updated version coming soon!

When using the columns element it’s nearly impossible for all the columns to have equal heights, especially when each column has different content inside. You can set a fixed pixel height, but this can cause reflowing issues. Here we’ll cover how create equal height layouts using flexbox. 

In this lesson
  • ‍Creating the layout
  • Setting the parent to flex and aligning the children to stretch
  • ‍Setting column width
  • ‍Auto margin trick
Before you get started

To recreate the initial layout we start this video with, add a div block onto your page. Add some content inside: a heading, a paragraph, a button. Duplicate the div block twice to have 3 div blocks with content inside. Replace the content if you wish to do so.

Creating the layout

As an example, we have three div blocks with content inside already on the page and they each have the same class names and styles. We are going add a container to the page, give it a class, and drop those three div blocks inside.

Three divs called Pricing block are placed inside a container called Flex container. These divs include text and a button each. They are stacked on top of each other with the second one including a green "Best choice" badge.

Setting the parent to flex and aligning the children to stretch

Once the three div blocks are nested inside the container we can set the container’s display setting to flex.

The default flex settings are set to Direction: Horizontal, Justify: Start, and Align: Stretch which are the exact settings we need for equal height.

On the left, the layout settings are set to display flex, direction horizontal, align stretch and justify left. On the right, the three divs are now all in one row next to each other with different widths.

Setting column width

Notice, though, that the div’s widths aren’t equal. You can make them equal by setting the div blocks’ width to be 33.33% (you can also do math here like 100/3%, then press enter). Alternatively, you you can set the div blocks’ flex child settings to Expand.

Two size settings panels are side by side. On the left, the width is set to 33.33%. On the right, the width is set to 100 divided by 3% in the text input fields.

Auto margin trick

In this example we also want the content in the divs to align with one another. We can do this with flexbox settings too.

  1. Select one of the divs
  2. Set its display setting to flex
  3. Set the Flex layout to Vertical
  4. Select the button
  5. Set its top margin to auto

Now the button’s margin will automatically adjust resulting in all three buttons aligning together.

Step one on the left, the button with text "get in touch now" is selected. Step two on the right, the pop up window for the top margin is showing the Auto setting selected. This is highlighted.