align-items vs. align-content

DONG Yuxuan @ Apr 08, 2020 Asia/Shanghai

Flex layout uses 2 properties align-items and align-content to align items in the cross-axis, by default, the vertical axis. This article explains the difference between the two properties.

If the container is not set to wrap, only the align-items works. There is only one line in a non-wrap container, align-items set how the items align each other in the cross-axis and how the line as a whole positions in the container.

If the container is set to wrap, both properties work. The align-items property sets how the items align each other in cross-axis. The align-content property sets how the all lines as a whole positions in the container.

A good example is to implement the following layout:

Three items align each other by their bottoms but they as a whole positions in the top of the container.

<style>
.box {
display: flex;
flex-wrap: wrap;
height: 300px;
width: 500px;
background: grey;
justify-content:center;
align-items: flex-end;
align-content: flex-start;
}

.item1 {
background: red;
width: 50px;
height: 50px;
margin: 10px;
flex-grow: 0;
flex-shrink: 0;
}

.item2 {
background: red;
width: 50px;
height: 100px;
margin: 10px;
flex-grow: 0;
flex-shrink: 0;
}
</style>

<div class=box>
<div class=item1></div>
<div class=item2></div>
<div class=item1></div>
</div>