If you still use floats or tables to create layouts, probably you are not very comfortable with Flexbox. In this article, we will use an interactive playground for our practical examples.

The layouts are very visual — you have to play with all these properties in order to digest the idea of how it works.

I’ve created this playground which we will use for our demos. It contains the minimum set of properties, but once you grasp them — you will figure the rest out by yourself with no problem.

We will learn the basics of Flexbox using three very practical use cases:

Navigation Bar. Centering any content vertically and horizontally. Media Object.

1. Navigation Bar

Let’s create a typical HTML for navbar:

<div class="navbar">

<div>Contact</div>

<div>Careers</div>

<div>About</div>

</div>

By default elements stack on top of each other:

It’s important to understand that Flexbox has a concept of the container and the items. By applying rules to the container it will change the behavior of its children.

All we have to do for using Flexbox is the following:

.navbar {

display: flex;

}

It will immediately change the items’ position:

Even though it looks nice and easy, it causes huge confusion in practice: you change one CSS property and your page turns into a bunch of narrow columns.

In order to understand why it works this way, we need to learn an important concept of Flexbox — the main and the cross axes. Once you know how it works you will never struggle with Flexbox again.

The main and the cross axes.

When you apply display: flex , Flexbox additionally applies another rule: flex-direction: row .

This sets the main axis horizontally from left to right.

What if we want to use Flexbox and put elements on each other? It’s quite simple, just change the direction of the main axis:

.navbar {

display: flex;

flex-direction: column;

}

Here we go:

On the picture, you can see the direction of the Main axis.

The flex-direction: column property sets the main axis vertically from top to bottom. In the playground you can switch on the axes and play with other properties.

The playground also has hints for each property, for both names and values:

Justify content

Once we know what the main axis is, we can move our items along this axis.

The justify-content property aligns items along the main axis. By default it has justify-content: flex-start value, which aligns items at the beginning of the main axis.

Let’s change it and center our items along the main axis:

.navbar {

display: flex;

flex-direction: row;

justify-content: center;

}

Nicely centered:

Let’s move all items to the right side:

.navbar {

display: flex;

flex-direction: row;

justify-content: flex-end;

}

Or distribute the space between items:

.navbar {

display: flex;

flex-direction: row;

justify-content: space-between;

}

And the last thing, what if we want to put both Contact and Careers items on the left side but About on the right side? Just use margin-left :

.navbar {

display: flex;

flex-direction: row;

justify-content: space-between;

} .navbar .about {

margin-left: auto;

}

Don’t forget about class for the item in HTML code.

Before you move on, it’s a good time to go and play with our flexbox playground, try to reproduce all the examples above.

2. Centering any content vertically and horizontally

Let’s create typical HTML for the centered box:

<div class="box">

<div>This box is perfectly centered.</div>

</div>

Over the many years, web developers have struggled with this such a simple task. CSS Flexbox has solved it once and forever no matter of the height or width of the content, is that an inline or a block element and so on.

We already know how to center the content along the main axis with justify-content property:

.box {

display: flex;

flex-direction: row;

justify-content: center;

}

Align items

The flex-direction sets the main axis. Actually, it does a little bit more. It also sets the cross axis which is just always perpendicular to the main axis.

The align-items is similar to justify-content but it works for the cross axis.

We can move our box by using the center value:

.box {

display: flex;

justify-content: center;

align-items: center;

}

All we are saying here: Flexbox, center it horizontally and vertically.

3. Media Object

Let’s create typical HTML for the media object:

<div class="media-object">

<img src="./userpic.jpg" /> <div class="text">

<h3>Liza</h3>

<p>Hey, have to tried Flexbox? This is so much better than floats!

</p>

</div>

</div>

In this part, we will learn how to use the remaining space between items. It’s critical in the situations when some items have a fixed size while another has to take the rest of the space. Typical examples:

Media objects — the image has a fixed width, the text takes the rest. Page layout — the footer and header have the fixed height and the main area takes the rest. Forms — labels take as much as they need, input takes the rest.

Before the Flexbox era, each problem deserved each own article. But now it’s so easy, it’s almost ridiculous. All these different problems can be solved with one line of code.

The flex property

If we want to an element to take the whole available space, we have to specify flex property:

.media-object {

display: flex;

} .media .text {

flex: 1;

}

So simple!

And still a lot of room for improvements. For example, if we develop a chat app, we want to swap the image and text on each row.

It’s a perfect use-case for the order property. Note, you don’t need to change your HTML, only CSS.

.media-object {

display: flex;

} .media-object .text {

flex: 1;

text-align: right;

} .media-object .img {

order: 1;

}

A default order value for all items is equal to 0. By specifying a value we move item further along to the main axis.

Again, it’s so simple because CSS Flexbox was designed to solve all these problems.

An exercise

Use flex and order properties in the playground. Try to create a responsive navbar and change the order of Products and About items like on the image below:

I hope this article will help you overcome the CSS Flexbox learning curve. And instead of fighting with buggy floats and position absolute layouts you can focus on creating a better user experience!

That’s it!

If you have any questions or feedback, let me know in the comments down below or ping me on Twitter.

If this was useful, please click the clap 👏 button down below a few times to show your support! ⬇⬇ 🙏🏼