Propriedade align-items

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

Sintaxe

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

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 ficam centralizados no eixo transversal (vertical).
`baseline`	Os elementos são alinhados de acordo com sua linha de base. A linha de base é uma linha imaginária que passa pela borda inferior dos caracteres sem considerar os descendentes, por exemplo, como nas letras `'p'` e `'y'`.
`stretch`	Os blocos são esticados, ocupando todo o espaço disponível ao longo do eixo transversal, mas ainda são considerados `min-width` e `max-width`, se definidos. Se a largura e a altura forem definidas para os elementos - `stretch` será ignorado.

Valor padrão: stretch.

Exemplo . Valor stretch

Agora o eixo principal está direcionado da esquerda para a direita, e ao longo do eixo transversal os elementos são esticados para toda a altura:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Exemplo . Valor stretch + dimensões do elemento

Agora a largura e a altura estão definidas para os elementos, portanto o valor stretch para a propriedade align-items será ignorado:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemplo . Valor flex-start sem dimensões do elemento

Agora os elementos serão pressionados para o topo:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Exemplo . Valor flex-start + dimensões do elemento

Agora os elementos continuarão pressionados para o topo, mas terão largura e altura definidas:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemplo . Valor flex-end + dimensões do elemento

Agora os elementos serão pressionados para a parte inferior:

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

#parent {
	display: flex;
	align-items: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemplo . Valor center + dimensões do elemento

Agora os elementos ficarão centralizados no eixo transversal (neste caso, verticalmente):

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemplo . Valor center, elementos de tamanhos diferentes

Agora os elementos têm tamanhos diferentes em altura (agora eles são expandidos pelo texto, mas também pode-se definir height), a largura é a mesma para todos, pois a propriedade width está definida:

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

Exemplo . Valor baseline, elementos de tamanhos diferentes

E assim é o alinhamento pela linha de base:

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

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

Exemplo . Alinhamento pelo início do eixo vertical no grid

Vamos alinhar nossos elementos dentro das células pelo início do eixo vertical:

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

#parent {
	display: grid;
	align-items: flex-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;
}

E agora vamos dar uma olhada no nosso grid no depurador do navegador:

Exemplo . Alinhamento pelo centro do eixo vertical no grid

E agora vamos alinhar nossos elementos nas células pelo centro do eixo vertical:

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

#parent {
	display: grid;
	align-items: 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;
}

Vamos ver a exibição do grid no depurador:

Exemplo . Alinhamento pelo final do eixo vertical no grid

Vamos alterar novamente o alinhamento dos elementos, desta vez pelo final do eixo vertical:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: 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;
}
#elem1 {
	
}

E agora vamos ver como fica nosso grid no depurador:

Veja também

a propriedade flex-direction,
que define a direção dos eixos dos blocos 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 dos blocos 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 flex-basis,
que define o tamanho de um bloco flex específico
a propriedade flex-grow,
que define a taxa de crescimento dos blocos flex
a propriedade flex-shrink,
que define a taxa de redução dos blocos flex
a propriedade flex,
abreviação para flex-grow, flex-shrink e flex-basis