Saltar para o conteúdo principal
LibraTool logoLibraTool

Gerador de CSS Flexbox grátis

Experimente a direção flex, ajuste, justify e align em itens ao vivo — e copie o CSS.

Funciona offline depois de carregado
Predefinições

Dica: clique em um item na visualização para alternar flex-grow: 1 nele.

Visualização ao vivo
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 Tudo funciona em seu navegador — nada é enviado.

Como funciona

Um playground interativo de flexbox: mude flex-direction, wrap, justify-content e align-items e observe até 10 itens ao vivo reorganizarem-se instantaneamente. Clique em qualquer item para lhe dar flex-grow: 1 e veja como reivindica espaço. O CSS atualiza ao vivo, pronto para colar no seu projeto.

  1. 1
    Defina o contêiner
    Direção, wrap, justify-content, align-items, espaço.
  2. 2
    Adicione itens
    Um a dez itens flex numerados.
  3. 3
    Experimente
    Clique num item para alternar flex-grow e ver o efeito.
  4. 4
    Copie o CSS
    As regras do contêiner (e item), prontas para colar.

Tudo funciona no seu navegador — nada é carregado.

Ferramentas relacionadas

🟦

Gerador de CSS Grid

Projete visualmente um CSS grid — faixas, unidades e lacunas — e copie o CSS e HTML gerados.

Experimentar
🌈

CSS Gerador de gradiente

Crie gradientes CSS lineares, radiais e cônicos com uma visualização ao vivo. Copie o CSS com um clique.

Experimentar
🎨

Gerador de sombra de caixa CSS

Construtor visual para CSS box-shadow com visualização ao vivo, empilhamento multicamadas, seletor de cores, alternância de inserção e cópia com um clique. Inclui predefinições de material, neumorfismo e brilho.

Experimentar

Perguntas frequentes