Flexbox part 2 - Leonel Ngoya

Hey,
It's been a while (more than a year 😬), so for my comeback I decided to continue the series on FlexBox. Yes, there was already a first article on this subject that you can check out HERE — an article I recommend you read to better understand the rest of the FlexBox series.

In the previous article we talked about the display: flex; property which transforms an element into a flex container, and also flex-direction which defines how children align. But mostly, I told you about the two axes mainAxis Alignment and crossAxis Alignment, which are very important.

In this article we'll see two more properties — justify-content and align-items — which control the alignment of children inside the flex container.

Let's reuse our files. We have an index.html containing:

<div class="container">
  <div class="item item-1" style="background-color: #f00;"></div>
  <div class="item item-2" style="background-color: #0f0;"></div>
  <div class="item item-3" style="background-color: #00f;"></div>
  <div class="item item-4" style="background-color: #ff0;"></div>
  <div class="item item-5" style="background-color: #0ff;"></div>
</div>

and style.css containing:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 700px;
  display: flex;
  flex-direction: row; /* which is the default value */
}

.item {
  width: 100px;
  height: 100px;
}

What we'll do is play with the justify-content properties to see their effect on the children.
First, you should know that justify-content can take several values, but the most common ones are:

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

.container {
  height: 700px;
  display: flex;
  flex-direction: row; /* which is the default value */
  justify-content: flex-end;
}

What we did is assign the value flex-end to the justify-content property and, as we see in the image below, the children are aligned to the right end of the container.

After this, we might automatically think that flex-end aligns elements to the right end, flex-start aligns them to the left end, and center aligns them to the center.
And that's where we're wrong,
I talked in the previous article about the mainAxis Alignment and crossAxis Alignment axes, and this is where it becomes important.
You should know that:

justify-content acts on the main axis (mainAxis Alignment)

So technically,

align-items acts on the secondary axis (crossAxis Alignment)

Without forgetting that:

The direction of the main axis and the secondary axis depends on the value of flex-direction

If it's vague then we'll do a small recap and a small correction of part 1 to explain this once and for all.

This is a diagram that shows how the axes are positioned according to the value of flex-direction. If you only remember one thing from this article, it's this.

With this, we can come back to our code and change the value of flex-direction to see how the elements will align.

.container {
  height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

As you can see in the image above, the elements are aligned at the bottom of the container, and that's because the value of flex-direction is column, so the main axis is the vertical axis.
And since we set flex-end as the value of justify-content, the elements are aligned at the bottom (the end of the main axis).

I think things are starting to be clear for you now,

I advise you to always refer to the diagram I showed you to better understand how elements will align.

Let's go back to our code and see how the other values of justify-content — namely space-between, space-around and space-evenly — will act on the children, since we already saw flex-start, flex-end and center.

space-between: Elements are evenly distributed on the main axis with space between them while touching the ends of the container.

.container {
  height: 700px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

space-around: Elements are evenly distributed on the main axis with space between them and also space at the ends that's half the space between elements.

.container {
  height: 700px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

space-evenly: Elements are evenly distributed on the main axis with space between them and also space at the ends that's equal to the space between elements.

.container {
  height: 700px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

Now we'll see the align-items property which controls the alignment of children on the secondary axis (crossAxis Alignment).
I think you've already understood how it works (don't forget to always refer to the diagram I showed you), so we'll directly look at the values of align-items:

flex-start
flex-end
center
stretch (the default value)
baseline

We'll start with:

stretch: Children stretch to touch the ends of the container.

This is a behavior we don't currently see because I defined a fixed height of 100px for the children.
What we'll do is remove the height of the children to see how stretch works.

.item {
  width: 100px;
  /* height: 100px; */
}

As you see in the image above, the children stretch to touch the ends of the container.

We'll put back the height of the children and continue,

flex-start: Children align at the end of the container — there's no difference with justify-content: flex-start; except that justify-content acts on the main axis and align-items on the secondary axis.
flex-end: Children align at the opposite end of the container — same idea, axis difference.
center: Children align at the center of the container — same idea, axis difference.
baseline: Children align on the baseline of the container — it's a bit complicated to explain, but it's like the children were aligned on an imaginary line passing through the base of the elements.

To better explain this, we'll give different heights to 2 of our children.

.container {
  height: 700px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.item {
  width: 100px;
  height: 100px;
}

.item-1 {
  height: 200px;
}

.item-3 {
  height: 300px;
}

As you see in the image above, the children are aligned on an imaginary line that passes through the base of the elements.
I can assure you it's a value you won't use every day, but it's good to know.

Before leaving you, I remind you to always refer to the diagram I showed you to better understand how elements will align.

We've reached the end of this article and I hope you liked it. If so, feel free to share it on your networks and also ask your questions if you didn't quite understand a point. So see you in the next article, ciao! It was LN 👋

Previous article: Create a custom cursor
Next article: Grid Template Areas