Flexbox 101

Flexbox is a must in today's UI development world as it lets you create responsive and elegant layouts in record time 🙆‍♂️

We'll go through concrete examples one at at time and build the following UI containing a navbar and a list of cards.

Throughout each step, we'll learn essential Flexbox concepts to get you going on the right foot, so feel free to create your own codepen to try them out.

Learning the basics with a navbar

Our HTML will look something like this:

1<nav>
2  <a href="#">
3    <img src="https://image.flaticon.com/icons/svg/145/145867.svg" />
4  </a>
5  <a href="#">Home</a>
6  <a href="#">Blog</a>
7</nav>
8

With an icon to the left and two links to the right, pretty standard stuff.

This navbar will use three Flexbox concepts: display, justify-content and align-items, so let's cover them one by one.

display

1nav {
2  display: flex;
3}
4

The first thing you'll type when working with Flexbox. It makes it so that every child of our nav takes advantage of the flex context.
We can now start moving around the container's children.

justify-content

1nav {
2  display: flex;
3  justify-content: flex-start | flex-end | center | space-between | space-around
4    | space-evenly;
5}
6

It determines where we place our container's elements on the main axis.
Each one is pretty self explanatory but it's worth playing around with it.

In our case, we want our items to be on the right (the end) of the navbar:

1nav {
2  display: flex;
3  justify-content: flex-end;
4}
5

"But Chris, by using the value flex-end everything goes to the end of my container, even the icon !", and you're absolutely right, we want our icon to be on the left while everything else is on the right. To do so, we can use a pretty neat trick, we set the icon's margin-right to auto, telling our layout to automatically place the icon to the far left like so.

1/* Target the first link in our navbar (the icon)  */
2nav > a:first-child {
3  margin-right: auto;
4}
5

Everything is starting to look better, although we still need to center our icon vertically.

align-items

1nav {
2  align-items: stretch | flex-start | flex-end | center | baseline;
3}
4

It determines the position of the container's children on the cross axis (the axis perpendicular to the one used by justify-content).

In our case, we want to align our navbar items vertically, like so:

1nav {
2  display: flex;
3  justify-content: flex-end;
4  align-items: center;
5}
6

And that's it, we have a fully fledged navbar and we learned three essential concepts of Flexbox ! 🎉

Bonus: flex-direction

Even though we're not using it here, I think it's worth mentioning flex-direction.

1.container {
2  flex-direction: row | row-reverse | column | column-reverse;
3}
4

Just like its name entails, it determines the container's main axis, think of it as creating a horizontal (by default) or vertical layout.

Try it out ! You'll see that defining it as column will have the expected result: a vertical layout.

Going a bit further with a card list

Alright, you may have seen the example UI shared earlier, we'll now work on creating this card layout and have it be responsive (which is made very easy thanks to Flexbox).

Here what our HTML will look like:

1<article class="card-container">
2  <div class="card">
3    <a class="card-link" href="#">
4      <time>May 4, 2019 | 3 min read</time>
5      <span>
6        <h2 class="card-title">My awesome card</h2>
7        <p class="card-description">...with a description !</p>
8      </span>
9    </a>
10  </div>
11
12  <!-- More cards below -->
13</article>
14

We will display a large amount of cards on multiple lines, these can be articles (like on christopherkade.com), TODOs or anything you'd like.

To do so, we only need one new concept: flex-wrap.

flex-wrap

It tells our container to wrap its items onto multiple lines when needed. By default flex will fit every item on the same line.

1.card-container {
2  flex-wrap: nowrap | wrap | wrap-reverse;
3}
4

So, our .card-container will now look like the following:

1.card-container {
2  display: flex;
3  flex-wrap: wrap;
4  justify-content: center;
5}
6

Try moving your window's size around, it's responsive and will render the the amount of cards that can fit each line automatically.

Wait, that's it?

Yeah, it's not hard to get started with Flexbox. Of course there's much more to it, but that's more than enough to produce cool layouts.

If you want to go further, make sure to check out CSS-Trick's Complete Guide to Flexbox which was the main inspiration to write this post.

Of course, if you have any questions concerning Flexbox, CSS as a whole or Javascript, don't hesitate to send them to me on Twitter @christo_kade 😄