Existe alguma diferença entre o align-items
e o align-content
?
1 Resposta
align-items
A propriedade align-items
alinha os itens dentro de um container flex ao longo do eixo cruzado (perpendicular). Funciona da mesma forma que o justify-content
para o eixo principal.
No caso do valor padrão de flex-direction: row
, o eixo cruzado corresponde à vertical e o eixo principal corresponde à horizontal. Com flex-direction: column
, esses dois são trocados respectivamente. Ou seja, na direção row
, um align-items: center
alinharia os elementos com a altura no centro da linha:
.container {
display: flex;
align-items: center;
background-color: #cccccc;
}
.box {
display: inline-block;
width: 50px;
background-color: #0066ff;
margin: 0 4px;
}
.box1 { height: 50px; }
.box2 { height: 30px; }
.box3 { height: 80px; }
.box4 { height: 60px; }
.box5 { height: 20px; }
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
align-content
A propriedade align-content
alinha as linhas de um container flex quando há espaço extra no eixo cruzado. Ou seja, não tem efeito algum dentro dos itens de uma única linha.
function alignItems() {
document.querySelector('.container').classList.toggle("alignItems");
}
.container {
display: flex;
background-color: #cccccc;
flex-wrap: wrap;
height: 300px;
align-content: center;
width: 300px;
}
.alignItems { align-items: flex-end; }
.box {
display: inline-block;
width: 50px;
background-color: #0066ff;
margin: 0 4px;
}
.box1 { height: 50px; }
.box2 { height: 30px; }
.box3 { height: 80px; }
.box4 { height: 60px; }
.box5 { height: 20px; }
<button onClick={alignItems()}>Toggle align-items: flex-end</button>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box1">6</div>
<div class="box box2">7</div>
<div class="box box3">8</div>
<div class="box box4">9</div>
<div class="box box5">10</div>
</div>
Referências: