Recentemente comecei a me aventurar em algumas novas tecnologias de front-end, e uma das mais legais que estudei foi o Flexbox. Para quem ainda não o conhece, essa especificação está há muito tempo nas redondezas, mas só nos últimos anos que começou a ter destaque por ganhar suporte dos navegadores.
De forma extremamente enxuta, o Flexbox é uma maneira mais inteligente de nos ajudar a montar nossos layouts de um jeito que sejam perfeitos em qualquer tipo de tela: seja em um desktop com uma resolução altíssima; ou um smartphone mais simples. O objetivo é tornar o desenvolvimento destas telas responsiva mais fácil para nós, profissionais, de TI.
Se você já pensou em Bootstrap, saiba que a última versão do framework mais famoso do mundo já está utilizando o Flexbox por debaixo dos panos nos seus componentes (para saber mais, veja este link). Para te ajudar a entender melhor como tudo isso funciona, farei a tradução e aprimoramento de um artigo muito bacana que eu vi no blog do FreeCodeCamp. O artigo em questão se chama “How Flexbox works — explained with big, colorful, animated gifs” e está disponível neste link.
Entrando no mundo do Flexbox
A tecnologia toda funciona em cima de algumas propriedades bem importantes. Veremos as quatro principais neste artigo.
Display: Flex
Se você acredita que precisará baixar alguma biblioteca ou coisa do tipo para começar a trabalhar com o Flexbox, saiba que você está muito enganado. Como citei anteriormente, essa tecnologia é uma especificação oficial do CSS, ou seja, o suporte vem diretamente dos navegadores (algo semelhante ao que acontece ao ECMAScript, por exemplo).
Para começar a usar o Flexbox, o processo é bem simples. Considere a seguinte página:
Aqui temos a estrutura básica de qualquer elemento Flexbox. O elemento que contém tudo o que queremos alinhar é chamado de container. Neste exemplo, o container possui quatro outros elementos filhos. Agora, basta adicionar a propriedade display:flex no container para ver a mágica acontecer.
Legal, né? Com isso temos o que é chamado de contexto flex para os elementos. Mas por que será que eles foram alinhados dessa maneira? É aí que entram outros dois conceitos fundamentais que veremos a seguir.
Flex Direction
Quando falamos de Flexbox, é importante termos consciência de que ele trabalha em cima de dois eixos: o eixo principal (chamado de main axis) e o eixo secundário (chamado de cross axis).
Por padrão, os itens são organizados ao longo do eixo principal, da esquerda para a direita. É por isso que os quadrados foram padronizados para uma linha horizontal quando aplicamos display: flex. Nós podemos mudar isso com a propriedade flex-direction. Por padrão, seu valor é row (linha), mas podemos alterar para column (coluna). Dessa maneira, voltamos ao comportamento anterior.
Além disso, podemos fazer mais algumas brincadeiras usando os valores row-reverse e column-reverse.
Justify Content
Agora que entendemos como funciona o sistema de eixos de base do Flexbox, podemos entender a propriedade justify-content. Em resumo, ela é a responsável por controlar como alinhar os itens no eixo principal. Podemos utilizar cinco valores:
- Flex-start
- Flex-end
- Center
- Space-between
- Space-around
Veja como cada um deles atua:
Align Items
E assim como podemos controlar o alinhamento no eixo principal, também podemos fazer isso no eixo secundário! Para isso, utilizamos a propriedade align-items. Nesta propriedade conseguimos utilizar cinco valores diferentes:
- flex-start
- flex-end
- center
- stretch
- baseline
Veja como cada um deles atua:
Desafio
Agora que sabemos como alinhar os elementos em ambos os eixos, fica o desafio: como podemos centralizar os elementos dentro do nosso container? A resposta é muito fácil, certo? Basta utilizarmos o valor center nas propriedades align-items e justify-content.
Agora pense no trabalho que você tinha pra fazer isso acontecer sem o Flexbox! Essa tecnologia é ou não é interessante?
Conclusão
Estes são somente alguns dos tópicos importantes sobre o funcionamento do Flexbox. Há muito mais propriedades que devem ser estudadas, mas todas elas se baseiam nos princípios que vimos aqui. Se você gostou do conteúdo, lhe convido a visitar o artigo original e alguns outros recursos que deixarei abaixo:
De 0 a 10, o quanto você recomendaria este artigo para um amigo?