Apprenez et testez Flexbox

Playground interactif pour apprendre et expérimenter avec les propriétés CSS flexbox.

Propriétés du conteneur

flex-direction

flex-wrap

justify-content

align-items

gap: 8px

Propriétés des éléments

Élément 1

grow

shrink

order

Élément 2

grow

shrink

order

Élément 3

grow

shrink

order

Aperçu

Code CSS

.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;
}

Comment utiliser cet outil

1.Ajustez les propriétés du conteneur pour voir comment les éléments sont disposés
2.Modifiez les propriétés individuelles comme flex-grow et order
3.Copiez le CSS généré pour le conteneur et les éléments