À propos de cet outil
Ce générateur produit des déclarations Flexbox standard pour un conteneur. L'aperçu contient plusieurs éléments numérotés et applique immédiatement chaque modification pour comparer les alignements.
Mode d'emploi
- Définissez flex-direction pour choisir l'orientation de l'axe principal.
- Choisissez justify-content et align-items.
- Réglez flex-wrap et l'espacement gap.
- Observez la position des éléments, puis copiez le CSS de .container.
Exemples
- row avec center peut centrer les éléments horizontalement.
- column oriente l'axe principal verticalement.
- wrap autorise plusieurs lignes lorsque l'espace manque ; nowrap conserve une seule ligne.
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}Fonctionnement et explications CSS
justify-content répartit les éléments sur l'axe principal ; align-items les aligne sur l'axe transversal. Avec row, l'axe principal est généralement horizontal ; column le rend vertical. flex-wrap autorise ou interdit le retour à la ligne lorsque l'espace manque. gap ajoute un espacement entre les éléments ou les lignes.
Utilisations courantes
- Créer des navigations, des groupes de boutons et des rangées de cartes.
- Comprendre les axes principal et transversal.
- Comparer space-between, space-around et space-evenly.
Confidentialité
La saisie, les calculs, la génération CSS et les aperçus sont entièrement traités dans votre navigateur. Aucun contenu n'est envoyé à un serveur. Aucun backend, base de données, API en ligne ou CDN tiers n'est utilisé, et vos données ne sont pas enregistrées automatiquement.
FAQ
Quelle est la différence entre justify-content et align-items ?
Le premier répartit les éléments sur l'axe principal ; le second les aligne sur l'axe transversal. Ils ne correspondent donc pas toujours aux directions horizontale et verticale.
Que devient l'axe principal lorsque flex-direction change ?
row suit la direction des lignes, et column celle des colonnes. Les variantes reverse inversent le sens de l'axe correspondant.
Quand utiliser flex-wrap ?
Utilisez wrap si vous souhaitez répartir les éléments sur plusieurs lignes lorsque le conteneur manque de place.
Peut-on utiliser gap avec Flexbox ?
Oui. Cette propriété standard définit l'espacement entre les éléments et les lignes.