Diferença entre justify-content e align-items?

justify-content alinha no eixo principal (a direção em que o container flui); align-items no eixo cruzado. Mude direction para column e os papéis trocam visualmente.

Por que align-items stretch preenche o container?

Stretch é o padrão. Diz aos itens sem tamanho explícito no eixo cruzado para preencher o espaço disponível. Outro valor encolhe os itens para o conteúdo.

Quando flex-wrap importa?

Quando os itens não cabem em uma linha. Com wrap, vão para a próxima linha; com nowrap (padrão) encolhem para caber ou transbordam.

Por que a classe Tailwind é valor arbitrário?

A maioria das propriedades flex tem classe dedicada (flex, justify-center, items-center, gap-2). Gaps com valores custom (8px, 12px) usam valores arbitrários como gap-[8px].

Playground de CSS Flexbox

Ajuste cada propriedade flex clicando em vez de digitar. A pré-visualização atualiza imediatamente para deixar claro o significado de cada valor, e a caixa de saída entrega tanto a regra CSS pura quanto as classes utility do Tailwind equivalentes. Ótimo para aprender o modelo, depurar layouts ou colar a combinação certa em um projeto.

—

flex-direction

flex-wrap

justify-content

align-items

gap (px)Itens

Pré-visualização

CSS

display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;

Tailwind

flex gap-[8px]

Como usar

Clique nas chips de cada propriedade para definir o valor.
Ajuste o gap e a quantidade de itens para uma pré-visualização mais realista.
Copie a regra CSS ou a classe Tailwind para seu projeto.

Perguntas frequentes

Diferença entre justify-content e align-items?: justify-content alinha no eixo principal (a direção em que o container flui); align-items no eixo cruzado. Mude direction para column e os papéis trocam visualmente.
Por que align-items stretch preenche o container?: Stretch é o padrão. Diz aos itens sem tamanho explícito no eixo cruzado para preencher o espaço disponível. Outro valor encolhe os itens para o conteúdo.
Quando flex-wrap importa?: Quando os itens não cabem em uma linha. Com wrap, vão para a próxima linha; com nowrap (padrão) encolhem para caber ou transbordam.
Por que a classe Tailwind é valor arbitrário?: A maioria das propriedades flex tem classe dedicada (flex, justify-center, items-center, gap-2). Gaps com valores custom (8px, 12px) usam valores arbitrários como gap-[8px].

Ferramentas relacionadas

Playground de CSS Grid

Escolha visualmente grid-template-columns / rows, gap e alinhamento — copie o CSS para o projeto.

Desenvolvimento 0 0

Playground de Filtros CSS

Componha visualmente blur, brightness, contrast, hue, sepia, invert e mais — copie o filtro CSS ou valor arbitrário Tailwind.

Cor 0 0

Gerador de Animação CSS

Construa uma animação CSS visualmente — escolha preset, ajuste duração/easing/iteração, veja preview e copie os keyframes.

Desenvolvimento 0 0

Construtor de CSS clip-path (polígono, círculo)

Construtor visual da propriedade CSS `clip-path` — escolha uma forma (círculo, elipse, inset ou polígono), ajuste números com sliders ou clique na pré-visualização para adicionar pontos do polígono, e copie uma declaração CSS pronta para colar. Inclui 10 presets de forma (triângulo, hexágono, estrela, seta, balão, mais, …).

Cor 0 0

Construtor de Expressões Cron

Monte uma expressão cron clicando — cada hora, dia, semana, mês ou totalmente custom — par do Cron Explainer.

Desenvolvimento 0 0

Detector de Caracteres Invisíveis / Zero-Width

Detecte NBSPs, caracteres zero-width, marcas bidi e tabs em texto colado — e limpe-os.

Desenvolvimento 0 0