O segredo mais bem guardado da Flexbox

Eu tenho trabalhado com Flexbox nos últimos meses e absolutamente amando o quão fácil e intuitivo que ele faça até mesmo o mais complexo dos layouts. Meu CSS era livre de hacks, minha marcação era lógico e em ordem e parecia que eu poderia posicionar qualquer coisa em qualquer lugar (align-items: center; FTW!). Esse sentimento acabou abruptamente no dia em que perguntei a minha pergunta: "Como eu substituo justify-content para posicionar um item flex de forma independente ao longo do eixo principal?" Eu estava tentando espaçar os itens flexíveis uniformemente ao longo do eixo principal dentro de uma linha com o último item flutuando todo o caminho para o lado direito. Eu estava perplexo como fazer isso sem flutuadores ou margens fixas.

Eu li muitos artigos sobre o Flexbox, usei-o na produção e até mesmo com algumas conversas técnicas sobre o assunto e pareceu que faltava alguma coisa. Cada artigo sobre o assunto explicou como o auto-alinhamento pode substituir os itens de alinhamento nos eixos transversais, mas nenhum deles mostrou como o mesmo pode ser feito no eixo principal. Eu estava prestes a aceitar que era simplesmente impossível fazer hack-free, quando um amigo meu (que tinha lido toda a especificação CSS Flexible Box Layout) me perguntou se eu estava usando margens automáticas. As margens automáticas não são novas no CSS, é claro, mas quando comparadas com o Flexbox, algo mágico acontece!

"TL, DR Flexbox e auto margens foram feitas um para o outro".

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *