Gerador de Flexbox
Defina as propriedades e leia, em linguagem simples, o que elas realmente fazem.
- Executa no seu navegador — seu texto nunca é enviado a lugar nenhum
- Sem cadastro, sem cotas, grátis para usar quantas vezes quiser
Como funciona
O Flexbox não é complicado, mas uma coisa nele pega quase todo mundo: justify-content e align-items não significam horizontal e vertical. Significam ao longo da direção e através dela, e a direção é algo que você define.
A armadilha, dita diretamente
Com flex-direction: row, o justify-content funciona na horizontal e o align-items na vertical. Mude para column e eles trocam completamente de lugar. Toda hora perdida com flexbox é, essencialmente, isso. A explicação logo abaixo é atualizada conforme você muda a direção, para que a relação fique visível em vez de decorada.
Eixo principal e eixo transversal
O eixo principal é aquele ao longo do qual os itens fluem, definido pelo flex-direction. O eixo transversal é perpendicular a ele. O justify-content distribui o espaço ao longo do eixo principal; o align-items posiciona os itens no eixo transversal. Quando esses dois nomes fixam, o resto vem naturalmente.
gap, e por que ele substituiu as margens
O gap coloca espaço entre os itens sem adicioná-lo fora do primeiro e do último, que é exatamente o que as margens fazem errado e o que as pessoas costumavam consertar com gambiarras de :last-child. É compatível com todos os navegadores atuais e não há mais motivo para evitá-lo.
nowrap significa encolher, não transbordar
O padrão é nowrap, e os itens encolhem abaixo do tamanho natural para caber, em vez de passar para uma nova linha. É por isso que o texto às vezes fica espremido de forma inesperada dentro de uma linha flex. Definir wrap faz os itens descerem; min-width: 0 em um filho impede que ele encolha além do seu conteúdo.
Centralizando nos dois sentidos
justify-content: center com align-items: center centraliza um item nas duas direções, independentemente do flex-direction, que é a única combinação que vale memorizar de cor.
Gerador de Flexbox — perguntas
Por que o align-items move as coisas na horizontal?
Porque o flex-direction é column. As duas propriedades seguem a direção, não a tela.
Qual é a diferença entre o eixo principal e o eixo transversal?
O eixo principal é a direção em que os itens fluem, definida pelo flex-direction. O eixo transversal é perpendicular a ele.
Como centralizo algo nos dois sentidos?
justify-content: center junto com align-items: center.
Por que meu texto está espremido?
O nowrap padrão encolhe os itens para caberem. Defina flex-wrap: wrap ou min-width: 0 no filho.
Posso usar gap com flexbox?
Sim, em todos os navegadores atuais. É melhor do que margens porque não adiciona espaço nas pontas.