Flexbox Playground

Domine flexbox com controles visuais interativos

Propriedades do Contêiner

Display

Direção Flex

Flex Wrap

Justificar Conteúdo

Alinhar Itens

Alinhar Conteúdo

Espaço

Espaço entre Colunas

Espaço entre Fileiras

Largura do Contêiner

Altura Mínima

Preenchimento

Presets

Itens

Visualização

Item 1

Item 2

Item 3

Eixo Principal

Horizontal

Eixo Transversal

Vertical

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