Justify Content e Align Items

Para posicionar os Flex Items dentro do Flex Container, usamos as propriedades justify-content e align-items.

A primeira controla o alinhamento dos itens ao longo do eixo principal (horizontal por padrão), enquanto a segunda controla o alinhamento ao longo do eixo secundário (vertical por padrão).

• justify-content pode ter valores como flex-start, flex-end, center, space-between e space-around.
• align-items pode ser configurado como flex-start, flex-end, center, baseline e stretch.

Por exemplo, se quisermos alinhar os itens horizontalmente no centro de um Flex Container, podemos fazer o seguinte:

.container {
  display: flex;
  justify-content: center;
}

Aqui, os itens dentro de .container serão alinhados no centro ao longo do eixo principal.

Visualização da propriedade justify-content

Visualização da propriedade align-items

Compartilhar

Compartilhar

Siga-me