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.

Author

Jorge Montoya

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
View all posts

Hi Paul, unfortunately, no. You can spin one up by going to https://rodsurl.com/startersite - but this will just open it…

I learned a lot from the Layout Builder for the Ambitious Site Builder course. Thank you so much for such…

Hey Methawee - as we talked about offline - Paragraphs is tough when it gets nested several levels deep. I…

Hey Kathryn - yeah - me too! Here's my take on it - It's at least 8 months to an…

While Dries was talking, I was thinking of your presentation at Florida Drupalcamp (I watched it and built a site…

Step # 1. – Create the HTML

Step #2. – The CSS Styles

Step # 3. – The Flexbox Styles

More tutorials of this series

Author