align-content property

The align-content property specifies an alignment of elements along the cross axis for flex blocks and along the block axis for grids. Applies to parent element.

Syntax

selector {
	align-content: flex-start | flex-end | center | space-between | space-around;
}

Values

Value	Description
`flex-start`	Blocks are pressed to the start of the cross (block) axis.
`flex-end`	Blocks are pressed to the end of the cross (block) axis.
`center`	Blocks are located in the center of the cross (block) axis.
`space-between`	Blocks are distributed along the cross (block) axis, with the first element pressed to the start of the axis, and the last one to the end.
`space-around`	Blocks are distributed along the cross (block) axis, with the same gap between the first block and the start of the axis, the last block and the end of the axis as between the other blocks. However, they are not equal, as it might seem: the gaps are summed up and the distance between two blocks is twice as large as between the block and the start/end of the axis.

Example . The flex-start value

In this example, the axis along which the alignment occurs is directed from top to bottom, i.e. it is vertical. As can be seen from the result obtained, all our elements are pressed to its top part:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Example . The flex-end value

In this example, the blocks are pressed against the bottom side of the cross axis because the align-content property is set to flex-end:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Example . The center value

Now the blocks are aligned to the center of the cross axis:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Alignment to the start of the block axis in a grid

Let's set the alignment of our elements in the grid to the start of the block axis:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	align-content: start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Aligning to the center of the block axis in a grid

Now let's set the alignment of the elements to the center of the block axis:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	align-content: center;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Aligning to the end of the block axis in a grid

Let's set the alignment of the elements to the end of the block axis:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	align-content: end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}