Desenvolvedor / Layout CSS

Playground de Flexbox: controles CSS do contêiner e dos itens

Teste a direção do flex, a quebra de linha, a justificação, o alinhamento e os gaps. Depois, ajuste o crescimento, a redução, a base, a ordem e o alinhamento de cada item. Veja como o layout muda e copie o CSS.

Playground de Flexbox: controles CSS do contêiner e dos itens: Exibe um contêiner flexível ao vivo com propriedades dos itens que podem ser editadas e uma breve explicação ao lado de cada controle. A visualização tem altura fixa para tornar visíveis os efeitos no eixo transversal. Layouts de grade com linhas e colunas compartilhadas estão disponíveis no gerador de CSS Grid. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria: Ferramentas para desenvolvedores
Execuções: No seu navegador
Custo: Grátis · sem cadastro
Disponibilidade: Pronto para usar

Laboratório de layout FlexboxProcessamento local

Roda inteiramente no seu navegador

DireçãoDefine o eixo principal e sua direção.QuebrarPermite linhas adicionais quando os itens não cabem.Justificar conteúdoDistribui o espaço restante ao longo do eixo principal.Alinhar itensAlinha os itens no eixo transversal dentro de cada linha.Alinhar conteúdoDistribui as linhas no eixo transversal quando a quebra cria várias linhas.Espaçamento (px)Define o espaço entre itens e linhas adjacentes.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

Use flexbox para uma linha ou coluna. Use CSS Grid quando linhas e colunas precisarem de trilhas compartilhadas. Abrir gerador de CSS Grid

Item selecionado 1ExpandirParcela relativa do espaço livre positivo.EncolherPeso relativo de redução, multiplicado pelo tamanho base.BaseTamanho inicial ao longo do eixo principal antes de expandir ou encolher.OrdemApenas a ordem visual; a ordem de leitura e do teclado permanece inalterada.Alinhamento individualSubstitui o alinhamento do eixo transversal do contêiner para este item.

Modelo de layout flex

W3C CSS Flexible Box Layout Module Level 1: https://www.w3.org/TR/css-flexbox-1/ . O espaço livre é distribuído usando os pesos de crescimento e redução do flexbox ao longo do eixo principal.

Alinhamento e acessibilidade

Conceitos básicos do flexbox na MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox . O eixo transversal é perpendicular ao eixo principal; a reordenação visual não reordena o documento.

Como usar

Defina a direção, a quebra de linha e o alinhamento do contêiner.
Clique em um item e altere seu tamanho e alinhamento individual.
Adicione ou remova itens, inspecione o layout e copie o CSS gerado.

Privacidade e limitações

As configurações do layout são processadas localmente no seu navegador.

Ferramentas relacionadas

Perguntas frequentes

Por que align-content às vezes não faz nada?

Ele distribui as linhas flexíveis. Para produzir um efeito visível, é necessário usar quebra de linha, ter várias linhas e contar com espaço livre no eixo transversal.

order altera a ordem para leitores de tela?

Não. Ele altera a ordem visual, enquanto a ordem de leitura do documento e a ordem do teclado permanecem inalteradas. Mantenha uma ordem lógica no documento.

Quando devo usar Grid?

Use Grid quando as linhas e colunas precisarem compartilhar trilhas. Flexbox é útil quando os itens são organizados principalmente ao longo de um eixo.

Ferramenta grátis · no seu navegador execuções · não precisa de conta