Sobre a Aula
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 comoflex-start
,flex-end
,center
,space-between
espace-around
.align-items
pode ser configurado comoflex-start
,flex-end
,center
,baseline
estretch
.
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
Entrar na conversa