Flexbox Cheatsheet Visual

Playground interativo para aprender Flexbox mudando props e vendo o resultado.

Propriedades do container

• display: flex — ativa flexbox
• flex-direction — eixo principal (row, column)
• justify-content — alinhamento no eixo principal
• align-items — alinhamento no eixo cruzado
• flex-wrap — permite quebrar linha
• gap — espaço entre items

Quando usar Flexbox

• Layouts 1D (linha OU coluna)
• Alinhar items dentro de um container
• Distribuir espaço entre items
• Navigation bars, card layouts simples

Para layouts 2D, use CSS Grid.

Tags: css, flexbox, layout, cheatsheet, frontend