In this post you’ll learn the basics of CSS Flexbox, which has become a must-have skill for web developers and designers the last couple of years.

We’ll be using a navbar as an example, as this is a very typical use case for Flexbox. This will introduce you to its most-used properties of the module, while leaving out the ones which aren’t as critical.

I’m also creating a free course on Flexbox. If you want early access you can leave your email here and I’ll send it to you once it’s ready.

Now let’s get started!

The two main components of a Flexbox layout are the container and the items.

Here’s the HTML for our example, which contains a container with four items: