- Qual a diferença entre justify-content e align-items?
- O justify-content posiciona os itens no eixo principal (a direção que o flex-direction define — row = horizontal, column = vertical). O align-items posiciona no eixo transversal (perpendicular ao principal). Com flex-direction: row, o justify-content move os itens para a esquerda e a direita e o align-items para cima e para baixo. Inverta quando mudar para column. As duas propriedades nunca se sobrepõem — cada uma só age no seu próprio eixo.
- Por que o align-content não faz nada?
- O align-content só tem efeito quando os itens quebram em várias linhas. Se o flex-wrap está em nowrap (o padrão), todos os itens ficam numa linha só e o align-content não tem o que alinhar. Coloque o flex-wrap em wrap, adicione itens suficientes para passarem para uma segunda linha, e o align-content começa a controlar como as linhas se distribuem no eixo transversal.
- O que flex-direction: row-reverse faz de verdade?
- Ele inverte a ordem em que os itens são colocados no eixo principal sem mudar a ordem no HTML. Com row-reverse, o item 1 fica à direita, o item 2 à esquerda dele, e assim por diante. justify-content: flex-start passa a significar a borda direita em vez da esquerda. A mesma ideia vale para column-reverse — os itens empilham de baixo para cima. Útil para layouts da direita para a esquerda (RTL) ou para reordenar visualmente sem mudar o DOM (o que mantém intactas a ordem do Tab e a ordem do leitor de tela).
- Devo usar gap, margin ou os dois?
- Use gap. Ele só coloca espaço entre os itens, não nas bordas de fora, e funciona nas duas direções (row-gap, column-gap) quando você muda para wrap. Margin nos filhos é o truque antigo — ele soma espaço em todos os lados, incluindo as bordas externas, e você precisa brigar com isso usando margin negativa no pai. O gap é suportado em todo navegador lançado depois de abril de 2021, o que cobre tudo o que está em uso hoje.
- Qual a diferença entre flexbox e CSS Grid?
- O flexbox é unidimensional — você organiza os itens numa linha ou numa coluna. O Grid é bidimensional — você define linhas e colunas e coloca os itens nas células. Regra prática: barras de navegação, fileiras de botões, pilhas verticais, barra lateral + conteúdo e qualquer caso em que os itens decidem o próprio tamanho = flexbox. Galerias de fotos, dashboards, layouts de revista, qualquer coisa com trilhas nomeadas = grid. Eles se combinam: uma célula de grid pode ser um contêiner flex.
- Por que um item está crescendo e os outros não?
- Ele tem flex-grow com um número positivo no filho. O flex-grow diz quanto do espaço que sobra o item vai pegar — 0 quer dizer “não cresça”, 1 quer dizer “pegue uma parte igual”, 2 quer dizer “pegue o dobro dos que têm 1”. Este gerador foca nas propriedades do contêiner; flex-grow / flex-shrink / flex-basis ficam nos filhos, e você define item por item no seu próprio CSS.
- Este CSS funciona em navegadores antigos?
- Sim, em tudo que é moderno. O flexbox tem suporte universal desde 2017 (Chrome, Firefox, Safari, Edge, celular). A propriedade gap em contêineres flex é a única novidade mais recente — com suporte completo desde abril de 2021. Se o seu público usa IE 11 ou um navegador de celular de 2020, troque o gap por margin nos filhos e evite space-evenly (use space-around como quase equivalente).
- Por que meus itens não encolhem abaixo do tamanho do conteúdo?
- Cada item flex tem um min-width: auto implícito, que é o tamanho do conteúdo (a palavra mais longa de um parágrafo, a largura natural de uma imagem). Isso se sobrepõe ao flex-shrink. Adicione min-width: 0 no filho para o flex-shrink conseguir encolhê-lo abaixo do tamanho do conteúdo. Essa é a surpresa mais comum do flexbox — e a correção é uma linha.
