Quelle est la différence entre « justify-content », « justify-items » et « justify-self » dans CSS Grid ?

Comprendre les différences entre justifier-soi, justifier-éléments et justifier-contenu dans la grille CSS

La disposition de la grille CSS offre une gamme de propriétés d’alignement et de distribution des éléments de grille. Cependant, naviguer dans les similitudes et les différences entre justifier-soi, justifier-éléments et justifier-contenu peut prêter à confusion. Cet article vise à clarifier leurs distinctions.

1. Propriétés Flexbox vs Grid

Contrairement aux justifications et aux éléments justifiés, justifier les éléments n'est pas une propriété dans Flexbox. Cela est dû à la nature unidimensionnelle de Flexbox, où l'alignement de plusieurs éléments le long de l'axe pose des problèmes. Dans Flexbox, justifier le contenu sert de principal moyen d'alignement des éléments.

2. Objectif de justifier-contenu, justifier-auto et justifier-éléments

• justify-content : Aligne les éléments de la grille le long de l'axe de la ligne (horizontal), en s'assurant qu'ils sont uniformément réparti dans le conteneur de grille.
• justify-items : Positionne le contenu dans chaque élément de grille le long de la ligne axe, ajustant l'alignement horizontal de ses éléments enfants.
• justify-self : Contrôle l'alignement d'un élément de grille spécifique dans la ligne de la grille, offrant un contrôle plus granulaire sur le placement des éléments individuels.

3. Différences entre justifier-contenu, justifier-auto et justifier-éléments

Les principales différences résident dans leur portée et leur niveau de contrôle :

• Portée : justifier-le contenu affecte l'alignement de tous les éléments de la grille d'affilée, tandis que justifier-auto et justifier-éléments fonctionnent au niveau des éléments individuels de la grille et de leurs contenu.
• Granularité : justifier-content fournit des options d'alignement pour la ligne entière, tandis que justifier-auto permet l'alignement d'éléments individuels dans la ligne et justifier-éléments gère l'alignement de contenu dans ces éléments.

Ressources pour en savoir plus Comprendre

• Réseau de développeurs Mozilla : alignement des boîtes de mise en page de grille CSS
• Smashing Magazine : création de mises en page de grille CSS prêtes pour la production
• Smashing Magazine : inspecteur de grille CSS

Inspirant Exemples

• Smashing Magazine : gagnants du CSS Grid Challenge 2017

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!