The 3 Colossal Problems Flexbox Fixed Instantly For Me (Flexbox Cheatsheet)

If you’re like me, you might’ve gotten comfortable using the tools you’ve been using for quite a long time now. You have a way you do things, and for the most part, everything runs pretty smooth. But when someone comes moseying into your bubble and tries to drop some “new and innovative” tool that’ll supposedly make your workflow easier, you might tend to kick them out of your tool shed.

This is what it felt like for me when I started hearing about Flexbox.

In the world of web development, you’re bound to hear about one new method of building after another. And unfortunately, like a lot of other creative industries, a lot of these techniques are duds, and you end up reverting to what you were using before. So when the word “Flexbox” started getting tossed around, I was pretty skeptical.

But once it became known to me that flexbox was now supported across all web browsers, I decided it was time to finally take a look at what all the hype was about.

As I’m sure you guessed by the title, I ended up falling in love. Flexbox is a step in the right direction for web development and is a great new weapon. And I say this as someone who holds onto the fundamentals for dear life.

There are a lot of cool features I could dive into, but for practical reasons, I wanted to share the Big 3 that I noticed immediately improved my code.

Vertically Centering with Flexbox

Let’s first talk about a universal coding problem. Vertical centering is an absolute (pun intended) pain in the ass. You’d think that something that sounds so simple would be that way. But unfortunately, that’s not the case. Let’s take a look at an example.

Below we have a div block with a static height and some content inside of it.

As you can see, we had no problem centering it horizontally with the code shown.

<div id="flexbox">
	<p>Center this!</p>
</div>

#flexbox {
	text-align: center;
}

But now we want to center it vertically as well. How would your average developer approach this? Well, I suppose you could give the div a padding-top property. But this is messy and would become a hassle if the div’s height was dynamic or ever needed to change. So after some research, a developer might come to this:

#flexbox {
	position: relative;
}

#flexbox p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

Woah. Okay, let’s figure out what we just did. Firstly, we made our paragraph have absolute positioning. This gives us the ability to move it around within whatever object we tag as relative, hence why we did so for the div. Now because we did this our text-align property no longer works on the paragraph, so it gets omitted. Instead, we attach top and left properties to move the paragraph halfway across the div. Finally, the transform property adjusts our paragraph to make it accurately centered within our box.

Still confused? I don’t blame you. When it comes to absolute positioning things can often become too ambiguous. And there are a lot of variables that could come into play when you’re working on a full-fledged website that makes absolute positioning super difficult to work with. You might have two elements in the div instead of one, and the height of the div will be based on the larger element, how would you handle that? You’d suddenly be thrown into a world of measuring and formulae. You’d even have to dust off your old geometry textbook.

Most of you are probably thinking, “There’s gotta be an easier way to do this.” Well, do I have good news for you.

Here we have our div again, but this time with Flexbox code.

#flexbox {
	display: flex;
	justify-content: center;
	align-items: center;
}

That’s it. Those three lines did all the work for us. How is this possible?

Well if you’re looking for a tutorial on how Flexbox works, there’s plenty out there you can look up (I’ve linked some of my favorites at the bottom of this post.) But here’s my short answer: Because it’s incredible.

Let’s look at another problem.

Flexbox Fill Remaining Height

I can’t tell you how many times I’ve had this problem. You’ll have a few objects aligned in the same row, and each one is filled with different content. More likely than not, all of them are going to be a different height. And maybe your designer wanted them all to be the same height. Well, the only way you can do that is to make all the objects in that row equal the height of the tallest one.

Here we have three different divs each containing an illustration:

Everything is okay!

Icepick’s own personal errand robot. He might look sad, but I promise it’s not that bad to work here.

A winged beauty.

Man, I think we can agree that this would look much better if all of these were the same height, regardless of caption length. So let’s take a look at the HTML.

<div class="row">

	<div class="col-xs-4">
		<div class="img-container"><!-- Our Content --></div>
	</div><!-- end .col-xs-4 -->

	<div class="col-xs-4">
		<div class="img-container"><!-- Our Content --></div>
	</div><!-- end .col-xs-4 -->

	<div class="col-xs-4">
		<div class="img-container"><!-- Our Content --></div>
	</div><!-- end .col-xs-4 -->

</div><!-- end .row -->

Don’t worry about those col-xs-4 classes, that’s just some generic Bootstrap code. What we’re focusing on here are the img containers.

Before Flexbox, the best solution would be to download a jQuery plugin like match-height.js or equalHeight.js and then target the img-container class in your Javascript file using a function.

That sounds like a lot of extra work for a really small adjustment. And news flash, it is. Instead, we’re going to implement Flexbox in the CSS like so:

.row {
	display: flex;
}

.img-container {
	height: 100%;
}

And almost like magic, those two lines of code do everything for us.

Everything is okay!

Icepick’s own personal errand robot. He might look sad, but I promise it’s not that bad to work here.

A winged beauty.

Dynamic Stretching

On one of Icepick’s latest projects, Cloudvara, I was tasked with putting together a pricing page. On this page, there would be different pricing options each on their own “card”.

For our client to have full control over their site, we needed to make this page dynamic so that if the guys over at Cloudvara wanted to, say, remove one of the pricing options, they could. The problem here is that to do this we would need to resize all of the cards (divs) based on how many pricing options the client eventually input. Since we built the site on WordPress, this would require a lot of complicated PHP logic.

Now let’s make the assumption that we’re all simple front-end folk here and PHP isn’t exactly on the table. How can we go about doing this?

You guessed it: Flexbox.

In fact, this is Flexbox’s main purpose. To be able to “flex” children of a parent object to fill in all available space. This means that you don’t need to type up a bunch of back-end mumbo-jumbo to get something like this to work. It just does. Here’s what the section were to look like if we removed the last pricing option:

And all we needed in our code was:

.price-cards {
	display: flex;
}

.price-card {
	flex: 1;
}

In Conclusion

Very often I’ll opt not to take the time to learn a new web development trend because it seems like a hassle. Why take the time to learn how to do something I already know how to do, but differently? Well, this happens to be one of those rare circumstances where I highly recommend you do.

So yes, I am that guy who is walking into your toolshed with some new and innovative technique. But if you’ve made it to the end of this article and you still aren’t swayed, then I wish you the best while you keep your 1966 Chevelle in mint condition so that you can pull it out of your garage at most, four times a year.

As for the rest of us: Flexbox is wizardry, but the good kind. The kind that helps us do more by putting in less. And isn’t that the ultimate goal?

Helpful Links

If you’re ready to try out Flexbox, here are some places you could get started:

– Wes Bos created an awesome in-depth video course that dives deep into Flexbox. Completely free!

– Flexbox Froggy is a neat game-like tutorial that lets you actually code within the browser to teach you about Flexbox.

– CSS Tricks (unsurprisingly) has a Flexbox cheat sheet you can turn to whenever you need a quick fix.

– Also, Jeffrey Way put out a sweet and easy to follow course on Laracasts, this one costs money though and the other links will do just fine to teach you. I just really dig Laracasts.

Happy coding!