Générateur Flexbox CSS

Réglez flex-direction, wrap, justify-content, align-items, gap et flex, order et align-self par élément en visuel, avec enfants en direct et CSS à copier.

Conteneur

flex-direction

flex-wrap

justify-content

align-items

align-content

gappx

align-content n’a d’effet que si les éléments passent sur plusieurs lignes.

Nombre d’éléments

Élément 1

Sélectionnez un élément ici ou cliquez dessus dans l’aperçu.

flex-grow

flex-shrink

order

flex-basis

align-self

Aperçu

Faites glisser le coin inférieur de l’aperçu pour redimensionner le conteneur.

Code CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}

Outils Connexes

Voir Tout

Générateur de box-shadow CSS Générateur de dégradé CSS Générateur CSS Grid Générateur de border-radius Générateur de glassmorphism Générateur de neumorphisme Générateur de text-shadow CSS Générateur d'animation CSS

Qu'est-ce que Générateur Flexbox CSS ?

Un terrain de jeu flexbox interactif : réglez les propriétés du conteneur, ajoutez jusqu'à 12 éléments enfants et ajustez flex-grow, flex-shrink, flex-basis, order et align-self pour chaque élément. L'aperçu applique exactement le CSS généré.

Comment utiliser Générateur Flexbox CSS

Réglez le conteneur : flex-direction, flex-wrap, justify-content, align-items, align-content et gap.
Choisissez le Nombre d'éléments affichés dans l'aperçu.
Sélectionnez un élément (bouton ou clic dans l'aperçu) et réglez flex-grow, flex-shrink, flex-basis, order et align-self.
Redimensionnez l'aperçu en faisant glisser son coin pour voir comment la mise en page réagit.
Copiez le code CSS de .container et des règles .item-n.

Exemple

Entrée

justify-content space-between, gap 16px; item 2: flex-grow 1, order 2, align-self center

Sortie

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

.item-2 {
  flex: 1 1 auto;
  order: 2;
  align-self: center;
}

Quand utiliser Générateur Flexbox CSS

Utilisez flexbox pour les mises en page à une dimension : barres de navigation, barres d'outils, groupes de boutons, objets média et centrage. Pour des mises en page de page à deux dimensions avec lignes et colonnes simultanées, le générateur CSS Grid est généralement le meilleur outil.

Comment fonctionne Générateur Flexbox CSS

Le conteneur reçoit toujours display: flex plus direction, wrap, justify-content et align-items. align-content n'est écrit que lorsque les éléments peuvent passer à la ligne (il n'a aucun effet sur une seule ligne), et gap seulement s'il est supérieur à 0. Pour les éléments, seules les valeurs différentes des valeurs par défaut sont écrites : flex: grow shrink basis quand ce n'est pas 0 1 auto, order quand ce n'est pas 0 et align-self quand ce n'est pas auto, dans des règles nommées .item-1, .item-2… Un flex-basis invalide est signalé et ignoré.

Cas d'utilisation courants

Centrer du contenu horizontalement et verticalement
Barres de navigation avec un élément poussé à droite
Colonnes de largeur égale avec flex: 1
Listes d'étiquettes ou de cartes avec retour à la ligne
Réordonner visuellement des éléments avec order

Questions Fréquentes

Pourquoi align-content manque-t-il dans mon CSS ?

align-content ne répartit que les lignes d'un conteneur flex avec retour à la ligne. Avec flex-wrap: nowrap, il n'y a qu'une seule ligne : l'outil l'omet donc.

Que signifie flex: 1 1 auto ?

L'élément peut grandir (1) et rétrécir (1) à partir de sa taille automatique. flex-grow décide de la façon dont l'espace supplémentaire est partagé entre les éléments.

order affecte-t-il l'accessibilité ?

order ne change que l'ordre visuel. Les lecteurs d'écran et le focus clavier suivent toujours l'ordre du code source HTML : ne l'utilisez donc pas pour un réordonnancement qui a du sens.