Perfect understanding of align-items, align-content and justify-content in FlexBox with examples: Part 1

In this article we will be exploring align-content, align-items and justify-content properties in FlexBox. Then we compare them and will understand their differences and similarities. I have created a few pens to demonstrate the task as well. 

align-content, align-items and justify-content similarities

Generally the main purpose of these three properties in FlexBox is justify and alignment of the flex container content. Both horizontally and vertically. Therefore it might be confusing which one should we use for which use case.

Similar points:

We start with similarities of the three properties:

  • They are all apply to the flex container itself not the flex items.
  • Both align-content and align-items are used for alignment in cross axis
  • Both justify-content and align-content have same values but in different use cases.
  • Also align-items ( in cross axis) and justify-content ( in main axis)  adjust and align the individual items in those axises.
  • They all help to distribute the remaining space in the container in between items.

Difference points

  • The align-items property aligns individual items not the whole container inside it wile the other two align all items like a pack inside container.
  • The align-content works only when there are a few lines of flex items wrapping. As it aligns the container’s lines in the cross axis. The other two work in one line of items as well.

Very important Note about main axis and cross axis

Technically main-axis means the flex-direction ( and not horizontal axis). So if you have a flex container with flex-direction : column; your main axis is vertical and your cross axis is horizontal.  We will demonstrate it with examples.

 The align-items property

In the example below we have 5 Flex containers with each showing the individual property values.

align-items in flex-direction: row( the default)

This is the default flex container with flex-direction: row which is the default. So main-axis is horizontal axis and cross axis is vertical axis:

The syntax for align-items is:

.container {  
  align-items: flex-start | flex-end | center | baseline | stretch;
}

Therefore it has five different values. We use this property to align flex items in the cross axis meaning vertical from top to bottom. 

The default value is stretch. Meaning the items will cover all the possible available area from top to bottom. 

The center value perfectly centres the items in the middle of the container along the vertical or cross axis.

center-stretch-alignment

Also the flex-start  starts the alignment of the items on the top and flex-end starts them in the bottom as you see in above pen.

Also the interesting baseline value aligns the baseline of the items’ content no matter what the content is. See how item 3 has smaller font or item 4 has two lines of text but all perfectly aligned by their baseline or their content line. 

align-items baseline and flex-start and flex-end values

It is essential to understand that align-items property aligns items based on the remaining space on the cross axis. If the container does not have extra vertical space we will not see the values effect. 

align-items in flex-direction: column

If we change the flex-direction to column, we will see the same effect in different axis though:

We see that center value centres items in the vertical horizontal axis this time which is the cross axis. Also stretch which is the default stretches all items in the cross axis ( horizontal). Remember that by changing the flex-direction the main axis and cross axis will change. And so the align-items property values effects:

align items column direction

Also baseline value aligns all baseline (starting) of text in all boxes at the very same point from the left which is the cross axis( horizontal). Flex-start and flex-end align items in the start or end of the container as expected in the cross axis.

In the next article we will learn about justify-content property and align-content property now that we know all about align-items property.

Thank you for reading.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.