← Todas as ferramentas

Aprenda e teste Flexbox

Playground interativo para aprender e experimentar com propriedades CSS flexbox.

Propriedades do container

Propriedades dos itens

Item 1
Item 2
Item 3
1
2
3
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

.item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  order: 0;
}

.item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  order: 0;
}

.item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  order: 0;
}

Como usar esta ferramenta

  • 1.Ajuste as propriedades do container para ver como os itens são dispostos
  • 2.Modifique propriedades individuais como flex-grow e order
  • 3.Copie o CSS gerado para o container e itens