align-items VS align-content
O alinhamento no eixo-cruzado, eixo oposto ao definido em flex-direction, é realizado tanto pelo align-items quanto o align-content, isso pode facilmente gerar confusão. Para isso irei demonstrar na prática a diferença entre eles.
Nosso exemplo estará com flex-direction: row; e flex-wrap: wrap; logo o eixo cruzado será o vertical, também é importante salientar que sem o flex-wrap o align-content não faz sentido, porque não existirão linhas flex para serem alinhadas, só itens flex para serem alinhados em uma única linha flex e para isso se usa somente o align-items.
Conceitos básicos
- Flex Container
É o local onde as propriedades flex, align-items e align-content são passadas, sendo o conjunto de itens e linhas flex
- Itens Flex / Flex Item
São os itens individuais que compõem o flex container
- Linhas Flex / Flex Lines
São o conjunto de itens flex no mesmo eixo principal (horizontal nesse exemplo)
Comportamento padrão (quando não definido):
- align-items: stretch; — Itens flex crescem na linha flex para preenche-la
- align-content: normal; — Linhas flex se alinham em sua posição padrão, como se nenhum valor tivesse sido definido, quando junto a um align-items passa a ter um comportamento semelhante (ex: com um align-items: flex-end; as linhas flex se alinham também ao fim)
align-items
É responsável pelo alinhamento de acordo ao eixo cruzado (verticalmente nesse exemplo) dos itens flex dentro de uma linha flex.
Na prática, o align-items insere em todos os elementos flex da linha a propriedade align-self respectiva
(ex.: usar align-items: flex-start; aplica align-self: flex-start; a todos os elementos da linha)
- align-items: flex-start;
Itens flex se alinham na linha flex ao começo (topo no ex.)
- align-items: flex-end;
Itens flex se alinham na linha flex ao fim (rodapé no ex.)
- align-items: center;
Itens flex se alinham na linha flex ao centro
- align-items: baseline;
Itens flex se alinham na linha flex conforme a base do texto
- align-items: stretch; (padrão)
Itens flex se esticam para preencher toda a linha flex, é o comportamento padrão que é adotado quando nenhuma configuração é passada
align-content
É responsável pelo alinhamento de acordo ao eixo cruzado (verticalmente nesse exemplo) das linhas flex de acordo ao flex container
- align-content: normal; (padrão)
Atua como se nenhum comportamento tivesse sido definido, assim a posição das linhas flex refletem a configuração do align-items
Ex.: Junto a um align-items: flex-end, acaba alinhando as linhas flex junto ao fim do flex container
- align-content: flex-start;
Linhas flex se alinham ao começo do flex-container (topo no ex.)
- align-content: flex-end;
Linhas flex se alinham ao fim do flex container (rodapé no ex.)
- align-content: center;
Linhas flex se alinham ao centro do flex container
- align-content: space-between;
Linhas flex se separam ao máximo possível
- align-content: space-around;
Linhas flex são separadas com espaços iguais entre cada linha (2x) o dobro da distância com a borda do flex container (x)
- align-content: space-evenly;
Linhas flex são separadas com espaços iguais de cada lado (x)
Agora só praticar!
Caso deseje, você pode experimentar todas essas propriedades no CodePen usado para escrever esse texto:
https://codepen.io/Skiiidrow/pen/oNBagKd
