Para que servem as propriedades justify-content e align-items num contêiner flexbox?

Num contêiner Flexbox, as propriedades justify-content e align-items são responsáveis pelo alinhamento dos elementos filhos, mas em eixos diferentes:

• justify-content controla o alinhamento dos elementos ao longo do eixo principal (main axis), que por padrão é horizontal. Ele determina como o espaço livre é distribuído entre e ao redor dos elementos.

  Exemplos de valores:

  • flex-start — os elementos estão colados ao início do contêiner.
  • center — os elementos estão centralizados.
  • space-between — espaço uniforme entre os elementos.

• align-items controla o alinhamento dos elementos ao longo do eixo transversal (cross axis), geralmente vertical.

  Exemplos de valores:

  • stretch (padrão) — os elementos se estendem por toda a altura do contêiner.
  • center — os elementos são alinhados ao centro vertical.
  • flex-start — os elementos estão colados à borda superior.

Dessa forma, essas propriedades permitem gerenciar de forma flexível a disposição dos elementos dentro de um contêiner flex.