CSS Flexbox #3. The align-items property

As you already learned in the second tutorial of this series, a flex-container has two following axes:

• main axis
• cross axis

The justify-content property specifies how the flex-items are distributed along the main axis, whereas the align-items property specifies how the flex-items are distributed along the cross axis of the flex-container.

This tutorial will introduce you the align-items property and how to use it within a flex-container. The align-items property accepts five possible values:

• flex-start
• flex-end
• center
• baseline
• stretch (default)

---

Step # 1. – Create the HTML

• Open your preferred code editor.
• Create an empty HTML file.
• Visit this page, copy the HTML code and save the file.

---

Step #2. – The CSS Styles

• Create a file called style.css (the file is already linked in the tag of the HTML code).
• Copy and paste this code:

/* GLOBAL STYLES */

* {
box-sizing: border-box;
}

body {
background-color: #AAA;
margin: 0px 50px 50px;
}

.item {
padding: 2rem;
border: 5px solid #87b5ff;
border-radius: 3px;
font-size: 2em;
font-family: sans-serif;
font-weight: bold;
background-color: #1c57b5;
}

---

Step # 3. – The Flexbox Styles

Create a flex-container.

• Edit the CSS code:

.container {
display: flex;
background-color: #f5ca3c;
}

The defaults for flex-direction and align-items are row and stretch respectively, that means the main-axis is the inline axis and the cross-axis is the block axis.

• Edit the CSS file:

.container {
display: flex;
background-color: #f5ca3c;
align-items: flex-end;
}

You will see no difference. That is because the flex-container is only as high, as the items inside it, like a regular block container.

In order to see how this works, you have to declare a height value for the flex-container.

• Edit the CSS code:

.container {
display: flex;
background-color: #f5ca3c;
height: 90vh;
align-items: flex-end;
}

As you can see, the flex-items have been displaced to the end of the cross axis, through the use of the align-items property. Let’s test other possible values.

• Edit the CSS file:

.container {
display: flex;
background-color: #f5ca3c;
height: 90vh;
align-items: flex-start;
}

Now the flex-items are located at the start of both axes within the container. Remember that the default value for the justify-content property is flex-start and that the default value for the flex-direction property (main-axis) is row.

• Edit the CSS file once again:

.container {
display: flex;
background-color: #f5ca3c;
height: 90vh;
align-items: center;
}

The items are now vertically centered along the cross-axis. If you want to center them perfectly within the container, you just add the justify-content property (once again main-axis) with the value center.

• Edit the CSS code:

.container {
display: flex;
background-color: #f5ca3c;
height: 90vh;
align-items: center;
justify-content: center;
}

• Edit the CSS code one more time:

.container {
display: flex;
background-color: #f5ca3c;
height: 90vh;
}

As already stated, the default value for the align-items property is stretch, so if you edit the code and add this property, you will see no difference at all.

• Edit the CSS code:

.container {
display: flex;
background-color: #f5ca3c;
height: 90vh;
align-items: stretch;
}

Now change the font-size of two of the flex-items.

• Edit the CSS code:

.item2 {<br>font-size: 3em;<br>}
.item3 {<br>font-size: 3.5em;<br>}

Notice that the baselines of the flex-items do not align with each other. In order to line all items (once again, along with the cross-axis) according to their baseline, you assign the baseline value to the align-items property.

• Edit the CSS code:

.container {
display: flex;
background-color: #f5ca3c;
height: 90vh;
align-items: baseline;
}

Until now, you have seen how the align-items property works with the default flex-direction: row. Let’s test how this works if we change the flex-direction to column.

• Edit the CSS code:

.container {
display: flex;
background-color: #f5ca3c;
flex-direction: column;
align-items: center;
}

Notice, that you don’t have to declare a height value for the container since the main-axis is now the block axis. The items pile on top of each other.

• Edit the CSS code:

.container {
display: flex;
background-color: #f5ca3c;
flex-direction: column;
align-items: flex-end;
}

• Edit the CSS code:

.container {
display: flex;
background-color: #f5ca3c;
flex-direction: column;
align-items: flex-start;
}

As you already have realized, it does not make much sense to declare the baseline value, since you would have to rotate all flex-items 90 degrees to the left, in order to line up their baselines and it is not very common to read that way.

In conclusion, the align-items property works always on the cross-axis, while the justify-content property works always on the main-axis. The main axis is always determined by the value of the flex-direction property.

I hope you liked this tutorial, thank you very much for reading.

---

More tutorials of this series

• CSS Flexbox #1. Creating Your First Flexbox Layout
• CSS Flexbox #2. How to Use the justify-content Property
• CSS Flexbox #4. The flex-grow Property