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:
<nav>
<a href="#">
<img src="https://image.flaticon.com/icons/svg/145/145867.svg"/>
</a>
<a href="#">Home</a>
<a href="#">Blog</a>
</nav>
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
nav {
display: flex;
}
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
nav {
display: flex;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
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:
nav {
display: flex;
justify-content: flex-end;
}
"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.
/* Target the first link in our navbar (the icon) */
nav > a:first-child {
margin-right: auto;
}
Everything is starting to look better, although we still need to center our icon vertically.
align-items
nav {
align-items: stretch | flex-start | flex-end | center | baseline;
}
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:
nav {
display: flex;
justify-content: flex-end;
align-items: center;
}
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.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
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:
<article class="card-container">
<div class="card">
<a class="card-link" href="#">
<time>May 4, 2019 | 3 min read</time>
<span>
<h2 class="card-title">My awesome card</h2>
<p class="card-description">...with a description !</p>
</span>
</a>
</div>
<!-- More cards below -->
</article>
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.
.card-container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
So, our .card-container will now look like the following:
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
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 😄
Top comments (8)
I did not know Flexbox was time gated 😉
I also mention the CSS Tricks guide in my conclusion 🙂
@iamdanthedev , do remember that not everyone has been coding forever, dev.to is a very beginner-friendly place.
Let's keep it that way by accepting that 'x 101' are needed, sometimes even by seasoned devs that might be learning new skills!
Exactly, content is content, and we need more beginner friendly content to lower our barrier to entry. 😄
Great write up and straight forward an explanation for those looking to get into flexbox. There are so many out there that got into layout and CSS back in the dark days that it is sometimes easy to forget to check and see the state of play these days for making life easier.
One suggestion I would make if that having inline examples of the output from your code blocks might help those who are visual learners.
Great suggestion, I'll make sure to add screenshots of every step from now on. Thank you Peter ! 😄
Great write up! Anyone who has been coding in HTML and CSS for the past decade really appreciates the rise of the flex box. Remember trying to @media your whole website with width %s??? So good.
As someone who struggles every time he has to touch CSS, I’m very grateful for this lovely explanation. Please do more of these, maybe for grid?
I'm glad it helped, if there's anything you would have done differently please let me know !
I'll try to make one for CSS Grid as soon as possible, feel free to follow me on Twitter so I can let you know as soon as it comes out 😃