Como o Flexbox funciona— explicado com gifs grandes e coloridos
NOTA: Esse artigo foi traduzido originalmente de: How Flexbox works — explained with big, colorful, animated gifs, com a autorização de Scott Domes. Todos devidos os créditos à ele.
O Flexbox promete nos salvar dos males do CSS puro (como o alinhamento vertical).
Bem, o Flexbox chega nesse objetivo. Mas dominar seu novo modelo mental pode ser desafiador.
Então vamos dar uma olhada em como o Flexbox funciona, sendo assim podemos usá-lo para construir layouts melhores.
O princípio base do Flexbox é tornar os layouts flexíveis e intuitivos.
Para conseguir isso, ele permite que os containers decidam por si mesmos como distribuir seus filhos de forma uniforme — incluindo seu tamanho e espaço entre eles.
À princípio, tudo isso soa bem. Mas vamos ver o que parece ser na prática.
Neste artigo, vamos mergulhar nas 5 propriedades mais comuns do Flexbox. Vamos explorar o que essas propriedades fazem, como você pode usá-las e como seus resultados vão parecer.
1ª propriedade: Display: Flex
Aqui está nossa página de exemplo:
Você tem quatro divs coloridas de vários tamanhos, coloca dentro de uma div container cinza. A partir de agora, cada div foi setada como padrão para display: block. Assim cada quadrado ocupa toda a largura de sua linha.
Para começar com o Flexbox, você precisa colocar seu container em um flex container. Isto é tão fácil quanto:
#container {
display: flex;
}
Não mudou muito — suas divs são exibidas inline agora, não precisamos dizer mais nada. Mas nos bastidores, você fez algo poderoso. Você deu à seus quadrados algo chamado de flex context.
Agora você pode começar à posicioná-los nesse contexto, com muito menos dificuldade do que com CSS tradicional.
2ª propriedade: Flex Direction
Um Flexbox container tem dois eixos: um eixo principal e um eixo transversal, que por padrão se parece assim:
Por padrão, os itens são dispostos ao longo do eixo principal, da esquerda para a direita. Essa é a razão pela qual seus quadrados são por padrão colocados em uma linha horizontal quando você aplicadisplay: flex.
Flex-direction, no entanto, te faz rotacionar o eixo principal.
#container {
display: flex;
flex-direction: column;
}
Há uma importante distinção a fazer aqui: flex-direction: column não alinha os quadrados no eixo transversal em vez do eixo eixo principal. Faz o próprio eixo principal ir de horizontal para vertical.
Há um par de outras opções para flex-direction, bem como: row-reverse e column-reverse.
3ª propriedade: Justify Content
Justify-content controla como você alinha itens no eixo principal.
Aqui você vai mergulhar um pouco mais na distinção do eixo principal/transversal. Primeiro, vamos voltar para flex-direction: row.
#container {
display: flex;
flex-direction: row;
justify-content: flex-start;
}Você tem cinco comandos à sua disposição para usar justify-content:
- Flex-start
- Flex-end
- Center
- Space-between
- Space-around
Space-around e space-between são os menos intuitivos. Space-between dá espaço igual entre cada quadrado, mas não entre os quadrados e o container.
Space-around coloca um espaço igual em cada lado do quadrado — o que significa que o espaço entre os quadrados extremos e o container é metade do espaço entre dois quadrados (cada quadrado contribuindo com uma quantidade igual de margem não-sobreposta, desta forma, dobrando o espaço).
Uma nota final: lembre-se que justify-content funciona ao longo do eixo principal, e flex-direction muda o eixo principal. Isso será importante quando você passar para a…
4ª propriedade: Align Items
Se você ‘sacou’ o justify-content, align-items será moleza.
Como o justify-content funciona ao longo do eixo principal, align-items se aplica ao eixo transversal.
Vamos resetar nosso flex-direction para row, assim nossos eixos vão se parecer exatamente como a imagem acima.
Então, vamos mergulhar nos comandos do align-items.
- flex-start
- flex-end
- center
- stretch
- baseline
Os três primeiros são exatamente o mesmo que justify-content, então nada de firulas aqui.
No entanto, os dois próximos são um pouco diferentes.
Você tem o stretch, em que os itens ocupam todo o eixo cruzado, e o baseline, no qual as partes inferiores das tags de parágrafo estão alinhadas.
(Note que para o align-items: stretch, Eu tive que definir a altura dos quadrados para auto. Do contrário, a propriedade height iria substituir o stretch.)
Para o baseline, esteja ciente de que se você tirar as tags de parágrafo, em vez disso ele alinha a parte inferior dos quadrados, dessa forma:
Para demonstrar melhor os eixos principal e transversal, vamos combinar o justify-content e o align-items e ver como a centralização funciona diferente para os dos comandos do flex-direction:
Com o row, os quadrados são colocados ao longo de um eixo principal horizontal. Com o column, eles caem ao longo de um eixo principal vertical.
Mesmo se os quadrados estiverem centralizados ambos verticalmente e horizontalmente em ambos os casos, os dois não são permutáveis!
5ª propriedade: Align Self
Align-self permite manipular manualmente o alinhamento de um elemento em particular.
É basicamente substituir o align-items para um quadrado. Todas as propriedades são as mesmas, embora é colocado auto como padrão, em que segue o align-items do container.
#container {
align-items: flex-start;
}.square#one {
align-self: center;
}
// Apenas esse quadrado será centralizado.
Vamos ver como isso funciona. Você irá aplicar o align-self a dois quadrados, e para o restante, aplique align-items: center e flex-direction: row.
Conclusão
Mesmo sendo só uma passada por cima do Flexbox, esses comandos devem ser o suficiente para você lidar com a maioria dos alinhamentos básicos — e para alinhar verticalmente o conteúdo do seu coração.
Obrigado por ler!
Suporte: caniuse.com/#feat=flexbox
