- Générateur CSS Flexbox en ligne : display flex visuel

CSS Flexbox — qu'est-ce que c'est ?

Flexbox (Flexible Box Layout) est un module CSS conçu pour distribuer l'espace entre les éléments d'un conteneur et aligner leur contenu, même lorsque leur taille est dynamique ou inconnue à l'avance. Contrairement au positionnement flottant (float) historiquement utilisé, Flexbox raisonne selon deux axes : l'axe principal (main axis) et l'axe secondaire (cross axis), dont le sens dépend de flex-direction.

Activer Flexbox : display: flex

Il suffit d'appliquer display: flex (ou inline-flex) sur un conteneur pour transformer tous ses enfants directs en flex items. Aucune balise supplémentaire n'est nécessaire — le comportement de disposition change immédiatement.

Pourquoi Flexbox a remplacé les floats

• Alignement natif : centrer verticalement et horizontalement ne demande que deux lignes de CSS, sans hack ni position: absolute.
• Adaptation au contenu : les items grandissent ou rétrécissent automatiquement selon l'espace disponible via flex-grow/flex-shrink.
• Réordonnancement visuel : order permet de changer l'ordre d'affichage sans toucher au HTML — utile pour l'accessibilité et le responsive.

Les propriétés du conteneur flex

flex-direction

Définit l'axe principal : row (défaut, horizontal gauche→droite), row-reverse, column (vertical haut→bas) ou column-reverse. Changer la direction inverse aussi le sens de justify-content.

flex-wrap

Par défaut (nowrap), tous les items restent sur une seule ligne, même s'ils débordent. wrap autorise le retour à la ligne dès que l'espace manque — indispensable pour des grilles de cards responsive.

justify-content — alignement sur l'axe principal

.flex-container {
    display: flex;
    justify-content: space-between; /* flex-start | flex-end | center | space-around | space-evenly */
}

space-between colle le premier et le dernier item aux extrémités et répartit l'espace restant entre les autres. space-evenly répartit un espace égal partout, y compris avant le premier et après le dernier item.

align-items — alignement sur l'axe secondaire

Aligne les items sur l'axe perpendiculaire à flex-direction. stretch (défaut) étire les items à la hauteur du conteneur ; center les centre verticalement (en mode row).

align-content — alignement des lignes (multi-lignes)

N'a d'effet que si flex-wrap: wrap est actif et qu'il existe plusieurs lignes d'items. Il aligne les lignes entières entre elles, contrairement à align-items qui aligne les items à l'intérieur d'une ligne.

gap

Ajoute un espacement uniforme entre les items sans marges manuelles ni pseudo-éléments. gap peut être décomposé en row-gap et column-gap pour un contrôle indépendant par axe.

Les propriétés des items flex

flex-grow

Détermine la capacité d'un item à grandir pour occuper l'espace disponible restant. Une valeur de 0 (défaut) empêche l'item de grandir ; 1 lui permet d'absorber tout l'espace libre proportionnellement aux autres items avec flex-grow > 0.

flex-shrink

Inverse de flex-grow : détermine la capacité d'un item à rétrécir quand l'espace manque. Par défaut 1 (tous les items rétrécissent proportionnellement) ; 0 empêche l'item de rétrécir, même si le conteneur déborde.

flex-basis

Taille de référence de l'item avant toute distribution d'espace par grow/shrink. Accepte auto (taille du contenu ou de width), une valeur fixe (200px) ou un pourcentage (25%).

/* Raccourci flex — recommandé en pratique */
.item {
    flex: 1 1 200px; /* grow shrink basis */
}
/* Équivalent explicite */
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 200px;
}

order

Change l'ordre d'affichage visuel sans modifier le DOM. Défaut 0 pour tous les items ; les valeurs négatives placent l'item plus tôt, les positives plus tard.

align-self

Surcharge align-items du conteneur pour un item spécifique — utile pour mettre en avant un élément unique sans changer l'alignement global.

Cas d'usage réels et patterns courants

Centrage parfait (horizontal + vertical)

.center-box {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Navbar avec logo à gauche et menu à droite

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}
.navbar .menu {
    display: flex;
    gap: 1.5rem;
}

Grille de cards responsive sans media query

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.card {
    flex: 1 1 260px; /* grandit, rétrécit, largeur de base 260px */
}

Chaque card garde une largeur minimale de 260px et se répartit automatiquement sur autant de colonnes que la largeur de l'écran le permet, sans écrire une seule @media.

Layout sidebar + contenu

.layout {
    display: flex;
    min-height: 100vh;
}
.sidebar {
    flex: 0 0 240px; /* taille fixe, ne grandit pas, ne rétrécit pas */
}
.content {
    flex: 1 1 auto; /* occupe tout l'espace restant */
}

Footer collant (sticky footer)

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1 0 auto; /* pousse le footer en bas même avec peu de contenu */
}

Flexbox vs CSS Grid : quand choisir quoi ?

Les deux modules sont complémentaires plutôt que concurrents :

• Flexbox : disposition unidimensionnelle (une ligne ou une colonne à la fois). Idéal pour navbars, listes de boutons, centrage, distribution d'espace entre quelques items dont la taille dépend du contenu.
• CSS Grid : disposition bidimensionnelle (lignes ET colonnes simultanément). Préférable pour des mises en page de page entière, des tableaux de cards alignées sur une grille stricte, ou du contenu qui doit s'aligner à la fois horizontalement et verticalement.

En pratique, il est courant de combiner les deux : une grid pour la structure globale de la page, et du flex à l'intérieur de chaque zone (carte, navbar, formulaire) pour aligner son contenu interne.

FAQ — Questions fréquentes

Pourquoi mes items flex ne rétrécissent pas sous leur flex-basis ?

Par défaut, le contenu (texte long, image) impose une taille minimale automatique (min-width: auto). Ajoutez min-width: 0 (ou min-height: 0 en colonne) sur l'item pour autoriser un rétrécissement complet.

Comment centrer un seul item sans toucher aux autres ?

Utilisez align-self: center directement sur cet item — cela surcharge align-items défini sur le conteneur, sans affecter les autres enfants.

gap fonctionne-t-il partout avec Flexbox ?

Oui, depuis 2021 gap est supporté sur Flexbox par tous les navigateurs modernes (Chrome 84+, Firefox 63+, Safari 14.1+). Pour les projets nécessitant Safari < 14.1, prévoir un fallback en marges.

Quelle est la différence entre flex: 1 et flex: auto ?

flex: 1 équivaut à flex: 1 1 0% (grandit et rétrécit depuis une base de 0). flex: auto équivaut à flex: 1 1 auto (la base part de la taille du contenu, pas de zéro) — utile quand on veut respecter la taille naturelle avant de distribuer l'espace restant.

Comment inverser l'ordre des items uniquement en mobile ?

Combinez une media query avec flex-direction: column-reverse ou modifiez order sur les items concernés dans un breakpoint dédié — les deux approches évitent de dupliquer le HTML.

Le générateur produit-il du code compatible avec Tailwind CSS ?

Le code CSS pur est universel. Avec Tailwind, transposez directement : flex, flex-row, justify-between, items-center, gap-4, grow, shrink-0, order-2 couvrent l'essentiel des réglages proposés ici.

Conclusion

Flexbox reste, plus de dix ans après son adoption, l'outil de disposition le plus utilisé en CSS pour tout ce qui touche à l'alignement et à la distribution d'espace sur un axe. Sa combinaison de propriétés — direction, wrap, justify-content, align-items côté conteneur, grow/shrink/basis/order/align-self côté items — couvre la grande majorité des besoins de layout quotidiens sans JavaScript ni framework.

Ce générateur visuel vous permet d'expérimenter chaque propriété en direct et de récupérer un code CSS propre, prêt à intégrer dans votre projet.