Propriedade align-content

A propriedade align-content define o alinhamento dos elementos ao longo do eixo transversal para contêineres flex e ao longo do eixo vertical para grids. Aplica-se ao elemento pai.

Sintaxe

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

Valores

Valor	Descrição
`flex-start`	Os blocos são pressionados para o início do eixo transversal (vertical).
`flex-end`	Os blocos são pressionados para o final do eixo transversal (vertical).
`center`	Os blocos estão centralizados no eixo transversal (vertical).
`space-between`	Os blocos são distribuídos ao longo do eixo transversal (vertical), sendo que o primeiro elemento é pressionado para o início do eixo, e o último - para o final.
`space-around`	Os blocos são distribuídos ao longo do eixo transversal (vertical), sendo que entre o primeiro bloco e o início do eixo, o último bloco e o final do eixo, há um espaçamento igual ao entre os demais blocos. No entanto, eles não são iguais, como poderia parecer: os espaçamentos se somam e entre dois blocos a distância é duas vezes maior do que entre um bloco e o início/final do eixo.

Exemplo . Valor flex-start

Neste exemplo, o eixo ao longo do qual o alinhamento ocorre está direcionado de cima para baixo, ou seja, é transversal. Como pode ser visto no resultado obtido, todos os nossos elementos estão pressionados para a sua parte superior:

<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;
}

Exemplo . Valor flex-end

Neste exemplo, os blocos são pressionados para o lado inferior do eixo transversal, pois a propriedade align-content está definida com o valor 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;
}

Exemplo . Valor center

Agora os blocos estão alinhados ao centro do eixo transversal:

<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;
}

Alinhamento no início do eixo vertical no grid

Vamos definir o alinhamento para nossos elementos no grid no início do eixo vertical:

<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;
}

Alinhamento no centro do eixo vertical no grid

E agora vamos definir o alinhamento dos elementos no centro do eixo vertical:

<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;
}

Alinhamento no final do eixo vertical no grid

Vamos definir o alinhamento dos elementos no final do eixo vertical:

<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;
}

Veja também

a propriedade flex-direction,
que define a direção dos eixos dos contêineres flex
a propriedade justify-content,
que define o alinhamento ao longo do eixo principal
a propriedade align-items,
que define o alinhamento ao longo do eixo transversal
a propriedade flex-wrap,
que define a quebra de linha múltipla dos contêineres flex
a propriedade flex-flow,
abreviação para flex-direction e flex-wrap
a propriedade order,
que define a ordem dos blocos flex
a propriedade align-self,
que define o alinhamento de um único bloco
a propriedade place-content,
que define o alinhamento ao longo dos eixos principal e transversal