Equal Height Layouts with Flexbox

 

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.  

Step 1: Create a 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.

 

Step 2: Set parent to flex and align

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.

 

Step 3: Set 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.

 

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.