Gerador de Flexbox CSS

Defina visualmente flex-direction, wrap, justify-content, align-items, gap e, por item, flex, order e align-self, com filhos ao vivo e CSS pronto para copiar.

Contêiner

flex-direction

flex-wrap

justify-content

align-items

align-content

gappx

align-content só tem efeito quando os itens quebram em várias linhas.

Número de itens

Elemento 1

Selecione um item aqui ou clique nele na pré-visualização.

flex-grow

flex-shrink

order

flex-basis

align-self

Pré-visualização

Arraste o canto inferior da pré-visualização para redimensionar o contêiner.

Código CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}

Ferramentas Relacionadas

Ver Todas

Gerador de box-shadow CSS Gerador de gradiente CSS Gerador de CSS Grid Gerador de border-radius Gerador de glassmorphism Gerador de neumorphism Gerador de text-shadow Gerador de animação CSS

O que é Gerador de Flexbox CSS?

Um playground interativo de flexbox: defina as propriedades do contêiner, adicione até 12 itens filhos e ajuste flex-grow, flex-shrink, flex-basis, order e align-self de cada item. A prévia aplica exatamente o CSS gerado.

Como usar Gerador de Flexbox CSS

Configure o contêiner: flex-direction, flex-wrap, justify-content, align-items, align-content e gap.
Escolha o número de itens exibidos na prévia.
Selecione um item (botão ou clique na prévia) e defina flex-grow, flex-shrink, flex-basis, order e align-self.
Redimensione a prévia arrastando o canto para ver como o layout reage.
Copie o código CSS de .container e as regras .item-n.

Exemplo

Entrada

justify-content space-between, gap 16px; item 2: flex-grow 1, order 2, align-self center

Saída

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
}

.item-2 {
  flex: 1 1 auto;
  order: 2;
  align-self: center;
}

Quando usar Gerador de Flexbox CSS

Use flexbox para layouts unidimensionais: barras de navegação, barras de ferramentas, grupos de botões, media objects e centralização. Para layouts de página bidimensionais, com linhas e colunas ao mesmo tempo, o Gerador de CSS Grid costuma ser a melhor ferramenta.

Como funciona Gerador de Flexbox CSS

O contêiner sempre recebe display: flex mais direction, wrap, justify-content e align-items. O align-content só é escrito quando os itens podem quebrar linha (ele não tem efeito em uma única linha), e o gap só quando é maior que 0. Para os itens, só são escritos os valores diferentes do padrão: flex: grow shrink basis quando não for 0 1 auto, order quando não for 0 e align-self quando não for auto, em regras chamadas .item-1, .item-2… Um flex-basis inválido é sinalizado e ignorado.

Casos de Uso Comuns

Centralizar conteúdo na horizontal e na vertical
Barras de navegação com um item empurrado para a direita
Colunas de mesma largura com flex: 1
Listas de tags ou cards que quebram linha
Reordenar itens visualmente com order

Perguntas Frequentes

Por que o align-content não aparece no meu CSS?

O align-content só distribui as linhas de um contêiner flex que quebra linha. Com flex-wrap: nowrap há uma única linha, então a ferramenta o omite.

O que significa flex: 1 1 auto?

O item pode crescer (1) e encolher (1) a partir do seu tamanho automático. O flex-grow decide como o espaço extra é dividido entre os itens.

O order afeta a acessibilidade?

O order só muda a ordem visual. Leitores de tela e o foco do teclado continuam seguindo a ordem do código HTML, então não o use para reordenações com significado.