Design et Ressources

Générateur de Flexbox

Générez du CSS de conteneur flex avec une prévisualisation de mise en page en direct.

Catégorie

Design et Ressources

Générateur de Flexbox

flexboxcss layoutfrontendGénérateur

Sortie

Generated Flexbox CSS

Direction

row

Gap

16px

Éléments

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

.flex-layout .item {
  min-width: 72px;
  min-height: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: white;
}

Flex layout Aperçu

Live canvas