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

justify-content positionne les éléments le long de l'axe principal (la direction définie par flex-direction), tandis qu'align-items les positionne le long de l'axe transversal perpendiculaire.

Qu'est-ce que l'axe principal ?

C'est la direction principale dans laquelle les éléments s'écoulent. Avec flex-direction: row, il est horizontal ; avec column, il est vertical.

Quand flex-wrap est-il important ?

Uniquement quand les éléments ensemble sont plus larges (ou plus hauts) que le conteneur. Avec wrap, les éléments supplémentaires passent sur une nouvelle ligne au lieu de rétrécir ou de déborder.

gap ajoute un espacement uniforme entre les éléments flex sans avoir besoin de marges, gardant la mise en page propre.

Des données sont-elles envoyées à un serveur ?

Non. Le bac à sable fonctionne entièrement dans votre navigateur et rien n'est envoyé.

Bac à sable Flexbox

flex-direction

justify-content

align-items

flex-wrap

gap: 8px

Éléments: 4

Aperçu

CSS

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

Sites externes associés

Certains liens sont des liens d'affiliation.

AmazonLe plus grand marché en ligne mondial pour les achats, l'électronique, les livres, les logiciels et plus encore. La livraison rapide, les retours faciles et le vaste catalogue de produits en font le choix privilégié pour les achats quotidiens. L'abonnement Prime ajoute le streaming, la livraison gratuite et des offres exclusives.UdemyUn marché d'apprentissage en ligne avec plus de 250 000 cours en programmation, design, business et plus. Les cours sont dispensés par des experts du secteur et disponibles à votre rythme. Les ventes fréquentes en font l'un des moyens les plus abordables d'apprendre.

Outils associés

Générateur de CSS clamp()Transformez une taille min et max et une plage de viewport en une valeur CSS clamp() fluide pour une typographie et des espacements responsives, avec aperçu. Dans votre navigateur.Formateur JSONFormatez, minifiez et validez du JSON en ligne gratuitement. JSON cassé ? Affiche exactement la ligne et la colonne de l'erreur avec surlignage. Rien n'est envoyé.Base64 Encoder / DécoderEncodez du texte en Base64 ou décodez du Base64 instantanément — accents et emojis sans erreur (UTF-8), Base64 sûr pour URL, image en data URL. Tout dans le navigateur.Testeur de RegexTestez des expressions régulières avec surlignage en direct, groupes de capture, drapeaux et aperçu de remplacement. Tout dans votre navigateur, sans envoi.

Expérimentez CSS Flexbox visuellement. Modifiez flex-direction, justify-content, align-items, flex-wrap et gap et regardez l'aperçu en direct se mettre à jour, puis copiez le CSS généré. C'est un moyen rapide de comprendre comment les propriétés flex interagissent ou d'ajuster une mise en page. Tout fonctionne dans votre navigateur.

Comment l'utiliser

Modifiez les propriétés flex avec les boutons.
Regardez les boîtes de prévisualisation se réorganiser en temps réel.
Ajustez le nombre d'éléments, puis copiez le CSS dans votre projet.

Axe principal et axe transversal

Un conteneur flex dispose les éléments le long d'un axe principal défini par flex-direction (une ligne ou une colonne). justify-content positionne les éléments le long de cet axe principal, tandis qu'align-items les positionne le long de l'axe transversal (perpendiculaire). flex-wrap décide si les éléments passent sur de nouvelles lignes, et gap ajoute un espacement uniforme entre eux.

Fonctionnalités

Toutes les propriétés clés

Contrôlez direction, justify-content, align-items, wrap et gap.

Aperçu en direct

Voyez les éléments se réorganiser instantanément à chaque modification.

Nombre d'éléments ajustable

Modifiez le nombre de boîtes pour voir comment les mises en page réagissent.

Copier le CSS

Obtenez une règle CSS prête à l'emploi pour votre conteneur.

Quand l'utiliser

Prototypage

Trouvez rapidement les bons réglages flex pour une mise en page avant de la coder.

Apprendre Flexbox

Développez votre intuition sur la façon dont justify et align se comportent ensemble.

Corriger l'alignement

Testez des combinaisons pour centrer ou répartir les éléments correctement.

Enseignement

Montrez le comportement de Flexbox en direct à des étudiants ou des collègues.

Remarques

L'axe principal suit flex-direction (row ou column).
justify-content agit sur l'axe principal ; align-items sur l'axe transversal.
Le retour à la ligne n'a d'importance que lorsque les éléments dépassent la largeur du conteneur.
Tout fonctionne sur votre appareil ; rien n'est envoyé au serveur.

Questions fréquentes

Quelle est la différence entre justify-content et align-items ?: justify-content positionne les éléments le long de l'axe principal (la direction définie par flex-direction), tandis qu'align-items les positionne le long de l'axe transversal perpendiculaire.
Qu'est-ce que l'axe principal ?: C'est la direction principale dans laquelle les éléments s'écoulent. Avec flex-direction: row, il est horizontal ; avec column, il est vertical.
Quand flex-wrap est-il important ?: Uniquement quand les éléments ensemble sont plus larges (ou plus hauts) que le conteneur. Avec wrap, les éléments supplémentaires passent sur une nouvelle ligne au lieu de rétrécir ou de déborder.
Que fait gap ?: gap ajoute un espacement uniforme entre les éléments flex sans avoir besoin de marges, gardant la mise en page propre.
Des données sont-elles envoyées à un serveur ?: Non. Le bac à sable fonctionne entièrement dans votre navigateur et rien n'est envoyé.