Aller au contenu principal
LibraTool logoLibraTool

Générateur CSS Flexbox — outil gratuit

Expérimentez avec la direction flex, le retour à la ligne, la justification et l'alignement sur des éléments en direct — et copiez le CSS.

Fonctionne hors ligne une fois chargé
Préréglages

Conseil : cliquez sur un élément dans l'aperçu pour basculer flex-grow: 1 sur celui-ci.

Aperçu en direct
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>

🔒 Tout s'exécute dans votre navigateur — rien n'est téléchargé.

Comment ça marche

Un bac à sable flexbox interactif : basculez flex-direction, wrap, justify-content et align-items et regardez jusqu'à 10 éléments en direct se réorganiser instantanément. Cliquez sur n'importe quel élément pour lui donner flex-grow: 1 et voir comment il réclame de l'espace. Le CSS se met à jour en direct, prêt à copier dans votre projet.

  1. 1
    Définissez le conteneur
    Direction, retour à la ligne, justify-content, align-items, espacement.
  2. 2
    Ajoutez des éléments
    Un à dix éléments flex numérotés.
  3. 3
    Expérimentez
    Cliquez sur un élément pour basculer flex-grow et voir l'effet.
  4. 4
    Copiez le CSS
    Les règles du conteneur (et de l'élément), prêtes à coller.

Tout s'exécute dans votre navigateur — rien n'est envoyé en ligne.

Outils associés

🟦

Générateur CSS Grid

Concevez visuellement une grille CSS — pistes, unités et espacements — et copiez le CSS et le HTML générés.

Essayer
🌈

Générateur de dégradés CSS

Créez des dégradés CSS linéaires, radiaux et coniques avec un aperçu en direct. Copiez le CSS en un clic.

Essayer
🎨

Générateur d'ombres portées CSS

Constructeur visuel pour CSS box-shadow avec aperçu en direct, empilement de plusieurs couches, sélecteur de couleur, bascule inset et copie en un clic. Comprend les préréglages Material, neumorphisme et lueur.

Essayer

Questions fréquemment posées