Éditeur Flexbox

Qu’est-ce qu’un éditeur visuel Flexbox ?#

Flexbox est le moteur de mise en page CSS pour disposer des éléments le long d’une seule direction (une ligne ou une colonne) et répartir l’espace libre entre eux. Il répond à des questions qui demandaient autrefois des flottants, des marges négatives et des essais-erreurs : « comment centrer ceci verticalement ? », « comment rendre ces trois colonnes de même hauteur ? », « comment pousser un élément tout à droite pendant que les autres restent à gauche ? ». Une fois compris, vous y avez recours sur presque every page ; avant cela, les noms de propriétés (justify-content, align-items, flex-grow) font trébucher même les développeurs expérimentés, car la spécification surcharge des mots anglais ordinaires d’un sens de mise en page très précis.

Cette page est un terrain de jeu Flexbox en direct. Vous réglez les propriétés du conteneur et les redéfinitions par élément dans la barre latérale gauche ; le volet droit affiche le résultat instantanément et écrit le CSS exact, prêt à copier-coller, qui l’a produit. L’idée est d’arrêter de deviner quelle valeur fait quoi et de voir l’effet au moment où vous la changez — puis de copier la règle qui a fonctionné.

Comment l’utiliser#

La mise en page se divise entre une barre latérale de contrôles et un panneau aperçu + sortie CSS.

1. Réglez le conteneur. Utilisez les listes déroulantes de la barre latérale :
   • Direction — row, row-reverse, column, column-reverse.
   • Justify content — répartit l’espace libre le long de l’axe principal : flex-start, center, flex-end, space-between, space-around, space-evenly.
   • Align items — dispose les enfants le long de l’axe transversal : stretch, flex-start, center, flex-end, baseline.
   • Wrap — nowrap garde tout sur une ligne ; wrap et wrap-reverse laissent les enfants passer à de nouvelles lignes.
   • Align content — n’apparaît que quand le wrap est activé ; il espace les lignes d’enfants wrappés.
   • Espacement — un curseur de 0 à 64 px ; la valeur en direct s’affiche à côté du libellé.
2. Gérez les éléments. Sous l’en-tête Éléments, Ajouter un élément insère un autre enfant flex. Chaque ligne d’élément expose Grow, Shrink, Basis, Ordre et Align self (une redéfinition par enfant du align-items du conteneur). Supprimez un enfant avec son bouton Supprimer.
3. Observez l’aperçu. Le grand cadre à droite est un vrai conteneur flex — chaque changement se redessine immédiatement.
4. Copiez le CSS. Le bloc de règles généré se trouve sous l’aperçu. Cliquez sur Copier pour le récupérer. Quand tous les éléments partagent les mêmes valeurs, un seul bloc .item est émis ; dès qu’un élément diffère, la sortie bascule sur un bloc .item:nth-child(N) par enfant afin que chaque redéfinition reste sans ambiguïté.

Caractéristiques principales#

• Propriétés du conteneur et par enfant au même endroit. Rien de Flexbox n’est caché — flex-direction, les deux axes d’alignement, le wrap, l’Espacement et par élément Grow/Shrink/Basis/Ordre/Align self sont tous en direct.
• Sortie CSS correcte et minimale. align-content n’est émis que quand le wrap est réellement activé (il ne fait rien sur une seule ligne) ; les éléments identiques se réduisent à un bloc ; order et align-self n’apparaissent que lorsqu’ils sont non définis par défaut. La sortie est la règle la plus courte qui reproduit ce que vous voyez.
• Le raccourci flex, correctement géré. Chaque enfant se sérialise en flex: <grow> <shrink> <basis> — la forme canonique à trois valeurs qui évite les valeurs par défaut surprenantes des valeurs manquantes du raccourci.
• Basis validé. Saisissez auto, 0, 200px, 50 % ou 10rem et c’est accepté ; un basis invalide est signalé et replié sur auto au lieu de produire silencieusement du CSS cassé.
• Aperçu forcé en gauche-à-droite. Le row de Flexbox est défini avec une sémantique gauche-à-droite, donc l’aperçu est figé en LTR quelle que soit la langue de la page — ce que vous voyez correspond à ce que votre feuille de style fera.

Exemple commenté#

Une mise en page courante : une ligne d’en-tête avec un logo épinglé à gauche, un titre qui occupe l’espace restant et une action épinglée à droite — répartis uniformément avec un espacement fixe.

• Direction : row
• Justify content : space-between
• Align items : center
• Wrap : nowrap
• Espacement : 16px
• Éléments : trois enfants, celui du milieu avec Grow 1 pour qu’il absorbe l’espace libre, les autres au défaut flex: 0 1 auto.

Le CSS généré :

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

.item:nth-child(1) {
  flex: 0 1 auto;
}

.item:nth-child(2) {
  flex: 1 0 auto;
}

.item:nth-child(3) {
  flex: 0 1 auto;
}

Parce que le deuxième enfant grandit et pas les autres, la sortie utilise correctement trois blocs nth-child séparés. Déposez ceci dans n’importe quel projet et le logo colle au bord gauche, l’action colle au bord droit, et le titre remplit le milieu — ni flottant, ni marge.

FAQ#

justify-content ou align-items — lequel est lequel ?#

justify-content travaille toujours le long de l’axe principal (la direction définie par flex-direction — horizontale dans un row, verticale dans un column). align-items travaille toujours le long de l’axe transversal (perpendiculaire à l’axe principal). Donc dans un row, justify-content contrôle l’espacement gauche/droite et align-items contrôle l’alignement haut/bas. Passez la direction en column et ils échangent les rôles. Retenir « justify = principal, align = transversal » évite la confusion Flexbox la plus courante.

Quand flex-grow fait-il vraiment quelque chose ?#

Uniquement quand il y a de l’espace libre à absorber. Si trois enfants ont chacun flex-grow: 1 et que le conteneur est plus large que ce dont les enfants ont besoin, l’espace restant est divisé en tiers et réparti également. Si le conteneur est exactement plein, rien ne grandit. Réglez flex-grow: 0 (le défaut) et un enfant refuse de s’étendre, laissant ses frères prendre la place. flex-shrink est le miroir : il décide qui cède de la place en premier quand il n’y en a pas assez.

Pourquoi mon Espacement n’apparaît-il pas ?#

Trois causes habituelles : les enfants ont une largeur fixe qui remplit entièrement le conteneur (plus de place pour les espaces), flex-wrap: nowrap force les enfants à déborder au lieu de wrapper dans la disposition consciente du gap, ou une marge sur les enfants masque visuellement le gap. Le curseur ici va jusqu’à 64 px ; si vous voulez plus, la propriété sous-jacente accepte n’importe quelle longueur, donc copiez le CSS et augmentez gap dans votre propre fichier.

La sortie utilise nth-child — puis-je utiliser une classe à la place ?#

Bien sûr. Les sélecteurs .item:nth-child(N) sont émis parce qu’ils correspondent sans ambiguïté à l’aperçu quand les éléments diffèrent. Dans du code réel, remplacez-les par vos propres classes (.logo, .title, .action) — les déclarations à l’intérieur restent identiques. Quand tous les enfants correspondent, l’outil émet déjà un seul bloc .item partagé que vous pouvez renommer à un seul endroit.