Gerador de Flexbox CSS
Crie layouts CSS com flexbox de forma visual. Veja o resultado em tempo real enquanto ajusta a direção, o alinhamento, a quebra de linha e o espaçamento.
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
Como usar esta ferramenta
- 1
Pick values from the four dropdowns: flex-direction, justify-content, align-items, and flex-wrap.
- 2
Drag the gap slider to set the spacing between items, from 0 to 40 pixels.
- 3
Watch the live preview of four numbered boxes update instantly to reflect each change.
- 4
Click 'Copy CSS' to copy the generated declaration block, then paste it onto your own flex container.
O que é o Gerador de Flexbox CSS?
O Flexbox é a forma moderna de distribuir elementos em CSS, muito mais simples do que os floats ou o posicionamento absoluto. As propriedades são: flex-direction (linha ou coluna), justify-content (alinhamento no eixo principal), align-items (eixo transversal), flex-wrap e gap. Esta ferramenta expõe todas elas com uma pré-visualização em tempo real.
Casos de uso comuns
Aligning a horizontal navigation bar so links sit at flex-start and a logo or button pushes to flex-end with space-between.
Centering a single element both horizontally and vertically using justify-content: center and align-items: center.
Spacing a row of buttons or tags evenly with a fixed gap instead of fragile margins.
Stacking form fields vertically by switching flex-direction to column while keeping consistent gap spacing.
Letting a row of cards wrap onto new lines on narrow screens with flex-wrap: wrap.
Learning how justify-content and align-items behave by toggling values and watching the live preview before committing the code.
Perguntas frequentes
Flexbox ou Grid?▼
Ferramentas relacionadas
Conversor de Cores (HEX/RGB/HSL)
Converta cores entre os formatos HEX, RGB e HSL. Escolha uma cor visualmente ou insira os valores manualmente.
Gerador de Box Shadow CSS
Crie valores de box-shadow em CSS de forma visual. Visualize em tempo real e copie o CSS gerado.
Gerador de Gradientes CSS
Crie gradientes CSS lineares e radiais. Escolha as cores de forma visual e copie o CSS gerado.
Gerador de Curvas de Aceleração Cubic Bezier
Crie curvas de aceleração cubic-bezier para CSS. Inclui predefinições padrão.
Gerador de Paletas de Cores
Gere paletas de cores harmoniosas a partir de qualquer cor base. Suporta esquemas complementares, análogos, triádicos e monocromáticos.
Gerador de Border Radius CSS
Crie valores complexos de border-radius em CSS de forma visual. Controle independente de cada canto.