Frontend
CSS Flexbox em 20 Minutos
Flexbox: eixo principal, alinhamento e layouts comuns em 20 minutos de prática.
CrazyStack
Carregando
Flexbox: eixo principal, alinhamento e layouts comuns em 20 minutos de prática.
Sim, é possível criar interações 3D como o Minecraft usando apenas CSS. Veja como isso funciona e surpreenda-se com...
Uma revolução silenciosa chegou ao CSS: agora você pode usar condicionais diretamente em suas folhas de estilo com a...
CSS Flexbox em 20 minutos: eixo principal, alinhamento e os layouts que você usa o tempo todo. Menos teoria abstrata, mais padrão reutilizável.
Quando você aplica display: flex num container, os filhos são organizados automaticamente em linha ( <em>row</em> ) ou coluna ( <em>column</em> ). Padrão? Flexbox posiciona na horizontal.
div pai com elementos filhos.display: flex na div pai.flex-direction para escolher a
direção: row ou column .flex-direction: row organiza itens horizontalmente. Já flex-direction: column empilha um abaixo do outro. A propriedade muda completamente o comportamento de alinhamento.
justify-content alinha elementos ao longo do eixo principal (definido por <code>flex-direction</code> ). <code>row</code> ? Eixo horizontal. <code>column</code> ? Vertical.
align-items alinha no eixo perpendicular ao principal. <code>flex-direction: row</code> ? Alinhamento vertical. <code>column</code> ? Horizontal.
Quer centralizar tudo no centro da div pai? Aplique: <code>display: flex</code> , <code>justify-content: center</code> e <code>align-items: center</code> . Simples assim.
Use gap pra espaçar automaticamente todos os filhos. Mesmo valor funciona pra colunas e linhas — sem precisar de <code>margin</code> .
Sem definir altura ou largura, elementos ocupam 100% do espaço no eixo principal se tiverem <code>display: block</code> . Com Flexbox, isso muda conforme as propriedades de alinhamento.
Dá pra aplicar <code>display: flex</code> direto nos filhos (tipo uma <code>div</code> retângulo) e usar <code>justify-content</code> e <code>align-items</code> pra centralizar o conteúdo interno — textos ou ícones.
Flexbox oferece solução moderna e unificada pra layouts unidimensionais. Esqueça tabelas ou floats pra sempre.
Além de <code>center</code> , teste <code>space-between</code> , <code>space-around</code> e <code>space-evenly</code> . Distribuem elementos com padrões diferentes de espaçamento.
Entender eixo principal e cruzado evita erros. Exemplo: <code>justify-content: start</code> no eixo horizontal alinha à esquerda com <code>row</code> e ao topo com <code>column</code> .
space-between empurra primeiro item pra esquerda e último pra direita, distribuindo espaço igual entre os elementos do meio.
space-around aplica meio espaço nas extremidades. Já space-evenly garante espaçamento idêntico entre tudo — elementos e bordas.
Evite misturar <code>margin</code> com <code>justify-content</code> pra alinhamento principal. Gera comportamentos contraditórios. Prefira Flexbox puro pra manter consistência.
Use Flexbox pra layouts unidimensionais (linha ou coluna). Estruturas complexas com múltiplas linhas e colunas? Grid é a ferramenta ideal.
Use a inspeção de elementos do navegador pra identificar display, espaçamentos e direção em tempo real.