Softonic

Générateur CSS Flexbox

Étape 1 / 2 Générer du CSS
Suivant

Flexbox est la solution pour les mises en page unidimensionnelles : rangées de cartes, barres de navigation, héros centrés, formulaires. Le modèle conteneur-élément est puissant, mais ses propriétés interagissent de manière peu évidente. Ce générateur élimine les conjectures pour le conteneur : choisissez flex-direction, justify-content, align-items, flex-wrap et gap, et obtenez une règle CSS propre à copier directement dans votre feuille de style.

Comment générer le CSS

  1. 1

    Choisissez une direction

    Choisissez row, column ou les variantes inversées. Cela définit flex-direction, l'axe le long duquel les éléments circulent.

  2. 2

    Réglez justify-content

    Choisissez comment les éléments se répartissent sur l'axe principal : début, centre, space-between, space-around ou fin.

  3. 3

    Réglez align-items

    Choisissez comment les éléments s'alignent sur l'axe croisé : stretch, début, centre ou fin.

  4. 4

    Réglez gap et wrap

    Ajoutez un espacement en pixels entre les éléments et décidez si les éléments passent à la ligne.

  5. 5

    Copiez le CSS

    Le générateur produit la règle du conteneur avec toutes les propriétés, prête à coller dans votre feuille de style.

Propriétés du conteneur

Propriété Valeurs Effet
flex-direction ligne / colonne / ligne-inverse / colonne-inverse Axe principal
flex-wrap nowrap / wrap / wrap-inverse Si les éléments se replient
justify-content flex-start / center / flex-end / space-between / space-around / space-evenly Distribution sur l’axe principal
align-items flex-start / center / flex-end / baseline / stretch Alignement sur l’axe croisé de chaque ligne
align-content mêmes valeurs + space-between / space-around Lorsque replié, distribution sur l’axe croisé des lignes
gap (row-gap, column-gap) longueur Espacement entre les éléments

Propriétés des éléments

Propriété Valeurs Effet
flex-grow 0+ (sans unité) Part de l’espace restant à absorber
flex-shrink 0+ (sans unité) Part de l’excédent à réduire
flex-basis longueur ou auto Taille de départ avant croissance/réduction
flex abrégé (1 1 auto, etc.) Les trois en une fois
align-self auto / flex-start / center / flex-end / baseline / stretch Remplace align-items pour un élément
order entier Réorganisation visuelle sans changer le DOM

Le truc flex: 1

flex: 1 est un abrégé pour flex: 1 1 0%. Cela rend un élément :

  • Grandir pour remplir l’espace disponible (grandir : 1)
  • Rétrécir si nécessaire (rétrécir : 1)
  • Commencer à partir de zéro taille (base : 0%)

Pour des colonnes de largeur égale, flex: 1 sur chaque élément donne une division parfaite. Pour des barres latérales qui ne doivent pas rétrécir en dessous du contenu, utilisez flex: 0 0 240px (pas de croissance, pas de rétrécissement, base de 240px).

Modèles courants

Héros centré

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

Navbar avec logo à gauche, liens à droite

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* pousse à droite */
  display: flex;
  gap: 1rem;
}

Ligne de cartes réactive

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* grandir/rétrécir, 260px minimum avant de se replier */
}

Champ de formulaire avec bouton (input flexible, bouton fixe)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox vs. Grid

  • Flexbox : une dimension (ligne OU colonne). Meilleur lorsque les tailles des éléments sont déterminées par le contenu ou lorsque vous distribuez de l’espace le long d’une seule ligne.
  • Grid : deux dimensions (lignes ET colonnes avec des pistes explicites). Meilleur lorsque la mise en page a une structure de lignes et de colonnes simultanément.

Pour une barre de navigation ou une pile de cartes : Flexbox. Pour une grille de cartes produits avec plusieurs rangées de cartes alignées : CSS Grid. De nombreuses pages réelles utilisent les deux, une mise en page de page Grid avec Flexbox à l’intérieur des composants.

Pièges courants

  • Éléments ne remplissant pas le conteneur : le align-items: stretch par défaut s’applique uniquement si les éléments n’ont pas de hauteur fixe. Avec une hauteur explicite, ils restent à cette taille.
  • gap ne fonctionne pas : vérifiez la prise en charge du navigateur. Le gap flex est arrivé tard ; Safari <14.1 ne le supportait pas. Maintenant universel en 2024+.
  • Enfants d’une colonne flex s’effondrant : une colonne flex a align-items: stretch par défaut, ce qui étire les éléments à la largeur du conteneur. Si un enfant définit une largeur, il sort.
  • order est uniquement visuel : les lecteurs d’écran et la navigation au clavier suivent l’ordre du DOM. N’utilisez pas order pour donner un sens au contenu ; utilisez-le uniquement pour le polissage visuel.

Questions fréquentes

Grid pour les mises en page de page en deux dimensions (lignes et colonnes ensemble). Flexbox pour les distributions unidimensionnelles (barre de navigation, ligne de boutons, pile). À l’intérieur d’une cellule Grid, Flexbox pour sa mise en page interne. La plupart des UIs complexes utilisent les deux.

Parce que la valeur par défaut de flex-shrink est 1 mais que la valeur par défaut de min-width est auto, ce qui équivaut à la largeur du contenu. Définissez min-width: 0 (ou min-inline-size: 0) sur l’élément pour lui permettre de rétrécir en dessous de sa taille intrinsèque.

display: flex; justify-content: center; align-items: center; sur le conteneur. Couvre la grande majorité des cas de “centrez cette chose” avec deux lignes.

Oui, dans tous les navigateurs modernes. Safari était en retard (ajouté dans 14.1, avril 2021) ; aujourd’hui, chaque navigateur majeur le supporte. Remplacez l’espacement basé sur margin par gap chaque fois que vous le pouvez, beaucoup plus simple.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Générateur de palettes de couleurs aléatoires

Générez des palettes aléatoires de 2 à 15 couleurs, choisissez un style vif, pastel, sourd ou sombre, puis copiez les codes HEX ou les variables CSS.

Générateur de lettres aléatoires

Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.