`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>