Learn CSS Flexbox in 5 Minutes

0 1

A quick introduction to the popular layout module

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!

Your first Flexbox layout

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:

<nav class="container">
<div>Home</div>
<div>Search</div>
<div>Logout</div>
</nav>

Before we turn this into a Flexbox layout the divs would be stacked on top of each other like this:

I’ve added a little bit of styling, but that has nothing to do with Flexbox.

To turn this into a Flexbox layout we’ll simply give the container the following CSS property:

.container {
display: flex;
}

This will automatically position the items nicely along the horizontal axis.

If you want to check out the actual code, you can head over to this Scrimba playground.

Now let’s shuffle these items around a bit.

Justify content and Align items

Justify-content and align-items are two CSS properties which help us distribute the items in the container. They control how the items are positioned along the main axis and cross axis.

In our case (but not always) the main axis is horizontal and the cross axis is vertical:

In this article, we’ll only look at justify-content, as I’ve found to be using this one much more than align-items. However, in my upcoming course, I’ll be going through both properties in detail.

Let’s center all the items along the main axis by using justify-content:

.container {
display: flex;
justify-content: center;
}

Or we can set it to space-between, which will add space between the items, like this:

.container {
display: flex;
justify-content: space-between;
}

Here are the values you can set for justify-content:

  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

I’d recommend you to play around with these and see how they play out on the page. That should give you a proper understanding of the concept.

Controlling a single item

We can also control single items. Let’s say we for example want to keep the first two items on the left side, but move the logout button to the right side.

To do this we’ll use the good old technique of setting the margin to auto.

.logout {
margin-left: auto;
}

If we’d want both the search item and the logout item to be pushed to the right hand side, we’ll simply add the margin-left to the search item instead.

.search {
margin-left: auto;
}

It’ll push the search item as far to the right hand side as possible, which again will push the logout item with it:

The flex property

So far, we’ve only had fixed-width items. But what if we want them to be responsive? To achieve that we have a property called flex. It makes it a lot easier than the old way of using percentages.

We’ll simply target all the items and give them a flex value of 1.

.container > div {
flex: 1;
}

As you can see, it stretches the items to fill the entire container.

In many cases you’d probably want one of the items to take up the extra width, and thereby only set one if them to have flexible width. We can for example make the search item take up all the extra space:

.search {
flex: 1;
}

Before we end this article, I want to mention that the flex property is actually a shorthand three properties: flex-grow, flex-shrink and flex-basis. However, learning those takes more than five minutes, so it’s outside of the scope of this tutorial.

If you’re interested in learning them, though, I’ll be explaining all three properties thoroughly in my upcoming course. Now that you’ve learned the basics you’ll definitely be ready to take my full-length course and become a Flexbox master.

I’m creating a free CSS Flexbox course. If you want early access, just leave your email here and I’ll give you early access once the course is ready.


Learn CSS Flexbox in 5 Minutes was originally published in freeCodeCamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

First Appear on: freecodecamp.org


- Advertisement -

Leave A Reply

Your email address will not be published.

x

We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our cookie policy.

I accept I decline