5

Existe alguma diferença entre o align-items e o align-content?

0

1 Resposta 1

4

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:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .