Playground de Flexbox
Flexbox Playground
Alterna cada propriedade flex num exemplo ao vivo e mostra o CSS e o que cada propriedade mudou.
Toda propriedade do flexbox em um exemplo vivo, com uma linha sob cada controle dizendo o que ela realmente faz. A prévia é o layout flex do próprio navegador e o CSS é esse estado escrito, então o que você vê é o que a sua página vai fazer.
Prévia
Clique num item para editar as propriedades dele à direita.
Contêiner
Item 1
Código
- · O eixo principal corre na horizontal.
- · Todos os flex-grow estão em 0, então quem divide o espaço que sobra é o justify-content.
As propriedades que ficam no valor padrão não são escritas. Só aparece o que você mudou.
Como usar
Defina as propriedades do contêiner
Direção, quebra de linha e as três propriedades de alinhamento. Cada uma tem uma frase embaixo explicando o que ela muda — `align-content`, em particular, não faz coisa alguma com uma única linha.
Clique em um item para editá-lo
Grow, shrink, basis, align-self e order se aplicam a um item. Adicione e remova itens para ver como o contêiner redistribui.
Leia as notas e copie o CSS
O painel descreve o que o seu layout atual vai realmente fazer, e a saída omite toda propriedade que ainda está no padrão — então o que você copia é só o que você mudou.
Perguntas frequentes
Por que meu item transborda em vez de encolher?
Ou `flex-shrink: 0`, ou um filho com um tamanho mínimo de conteúdo. O `min-width` de um item flex tem `auto` como padrão, o que significa que ele não encolhe abaixo do seu conteúdo — uma string longa sem quebras ou uma imagem larga é o culpado habitual. `min-width: 0` é a correção.
Qual é a diferença entre `align-items` e `align-content`?
`align-items` posiciona cada item no eixo transversal. `align-content` posiciona o *bloco de linhas* quando a quebra produziu mais de uma — então com `nowrap`, ou com uma única linha, ele não faz absolutamente nada. Essa é a fonte mais comum de “esta propriedade está quebrada”.
Devo usar `order` para reorganizar as coisas?
Com parcimônia. Ele muda a ordem visual e não a ordem do DOM, então leitores de tela e a ordem de tabulação continuam seguindo a marcação. Um usuário de teclado tabulando por um layout reordenado visualmente pula pela tela — e é por isso que a especificação o chama de último recurso.
Flexbox ou grid?
Flexbox para uma dimensão — uma fileira de botões, uma barra de ferramentas, o interior de um card. Grid quando linhas e colunas precisam se alinhar umas com as outras. Se você está aninhando contêineres flex para imitar um grid, você quer um grid.
Pode receber de
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Calculadora de tamanho fluido
Fluid Size Calculator
Calcula uma expressão clamp() que escala um tamanho suavemente entre duas larguras de viewport.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Gerador de CSS Grid
CSS Grid Builder
Desenha uma grade visualmente com áreas nomeadas e gera o CSS de grid-template.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.