Gerador de CSS Flexbox

Gere layouts CSS Flexbox visualmente. Controle direção, quebra, alinhamento e espaçamento.

Controls
Preview
Preview
CSS Code
/* Select controls above */

Perguntas frequentes

O que é CSS Flexbox?

Flexbox é um modelo de layout CSS projetado para layouts unidimensionais (linhas ou colunas) com poderosas capacidades de alinhamento e distribuição.

Quando devo usar Flexbox vs Grid?

Use Flexbox para layouts unidimensionais (barras de navegação, fileiras de cards). Use Grid para layouts bidimensionais (layouts de página, painéis).

O que faz o gap?

A propriedade gap define o espaçamento entre itens flex sem afetar margens externas, substituindo a necessidade de truques com margin.