Equal-height layouts with flexbox – Web design tutorial (using the Old UI)

Articles, Blog

Equal-height layouts with flexbox – Web design tutorial (using the Old UI)

Equal-height layouts with flexbox – Web design tutorial (using the Old UI)


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.

6 thoughts on Equal-height layouts with flexbox – Web design tutorial (using the Old UI)

  1. Thanks, I'm using OxygenBuilder but what you described worked perfectly there. I never heard of Webflow. Perhaps, I'll look into it.

  2. Webflow should be much more intuitive for designers with canvas engineering/mechanics like in photoshop, illustrator, affinity designer, affinity photo, adobe xd, uizard, etc. Im taking too much time doing pricing tables from scratch on this web design tool 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *