Générateur Flexbox

Configurer visuellement les propriétés CSS flexbox avec aperçu en direct des éléments

Qu'est-ce que c'est et comment ça marche ?

Un générateur de flexbox vous laisse configurer la disposition CSS Flexbox visuellement — basculer des propriétés et regarder les éléments se réorganiser dans un aperçu en direct — puis copier le CSS qui produit la disposition. Flexbox est la façon moderne d'arranger des éléments en ligne ou en colonne et de contrôler comment ils s'alignent, s'espacent et passent à la ligne, mais ses propriétés interagissent d'une manière difficile à prévoir depuis le seul code. Voir les éléments bouger en changeant justify-content ou align-items transforme des noms de propriété abstraits en une image intuitive.

Les propriétés qui font le gros du travail sont justify-content (espacement le long de l'axe principal), align-items (alignement sur l'axe transversal), flex-direction (ligne ou colonne) et flex-wrap (si les éléments débordent sur de nouvelles lignes). La confusion courante, c'est que les axes principal et transversal s'échangent quand on passe de ligne à colonne, justify et align échangent donc effectivement leurs rôles — ce qu'un aperçu en direct rend évident immédiatement. Cet outil génère du CSS basé sur les standards dans votre navigateur, prêt pour barres de navigation, grilles de cartes, centrage et barres d'outils.

Cas d'usage

• Centrer du contenu : configurez justify-content et align-items pour centrer parfaitement un élément horizontalement et verticalement.
• Construire une barre de navigation : espacez les liens uniformément le long d'une ligne et alignez-les, puis copiez le CSS flex.
• Disposer des cartes : réglez le passage à la ligne et l'espacement pour qu'une rangée de cartes s'écoule proprement sur de nouvelles lignes sur les petits écrans.

Questions fréquentes

Quelle différence entre justify-content et align-items ?

justify-content positionne les éléments le long de l'axe principal (horizontal dans une ligne), contrôlant l'espacement entre eux. align-items positionne les éléments le long de l'axe transversal (vertical dans une ligne), contrôlant leur alignement. Ensemble ils placent les éléments dans les deux directions.

Comment centrer quelque chose avec flexbox ?

Mettez le conteneur en display:flex, puis justify-content:center et align-items:center. Cela centre l'enfant sur les deux axes — la solution la plus propre au classique problème « centrer un div », que le générateur produit en quelques clics.

Pourquoi justify et align semblent-ils s'échanger quand j'utilise une colonne ?

Parce que flex-direction définit quel axe est le « principal ». Dans une ligne l'axe principal est horizontal ; dans une colonne il devient vertical, donc justify-content contrôle maintenant l'espacement vertical et align-items l'alignement horizontal. Les axes basculent avec la direction.

Quand utiliser flexbox plutôt que grid ?

Flexbox excelle à arranger des éléments dans une seule direction — une ligne ou une colonne — et à répartir l'espace le long d'elle. CSS Grid est conçu pour les dispositions bidimensionnelles avec lignes et colonnes ensemble. Beaucoup de mises en page utilisent flexbox pour les composants et grid pour la structure globale de la page.

CSS

Générateur d'ombre de boîte CSS · Générateur de rayon de bordure CSS · Générateur CSS Grid · Générateur d'ombre de texte CSS · Générateur d'animations CSS · Générateur de filtres CSS