Equal height layouts with Flexbox

 
new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

When you're using the columns element in Webflow, it’s nearly impossible for all the columns to have equal heights, especially when each column has different content. You could set a fixed pixel height, but this can cause reflowing issues. In this video, we’ll show you how to create equal-height columnar layouts with flexbox.

Clone this projectDownload project assetsDownload lesson assets

Transcript

Here are three div blocks, each containing content. Each div block has the same class applied: Pricing Block.

Let's say we want to sit them side-by-side. We can actually use our container element here. Let's drag that in. And we'll create a class — let's call it Flex Container (you can name it whatever you'd like). And we'll just drag in the three div blocks from below. We'll drop those right into the new flex container we just created.

Let's select the container again. And we'll switch our display setting to flex. Now with flex, we can stack the flex items horizontally or vertically — we want to make this horizontal. And we can quickly even things out by selecting any of our Pricing Blocks, and setting our width to a third (since we have three here). 33.33%. Or, this is a great time to point out: we can use math. 100/3...percent. Which is 33.333333–

Or instead of setting a width, we can just expand to set the flex items to equal widths automatically.

By default, on our container, we're already aligning to stretch. But let's click through some of the other options to see what's happening here. Back to stretch, we have equal heights. And since this is flexbox, we can even play around with margin without having to manually calculate values here.

But here's the mind-blowing part. These pricing blocks? We can make them flex containers, too. Why on earth would we want that? First, let's sort the content vertically. Second, check this out:

We'll take our button class. And for top margin, we'll click in and select Auto. And that's it. It'll knock down that button and keep it aligned to the bottom by creating auto margin above. So even if our content changes, everything will look aligned and amazing.

That's equal heights with flexbox.