Comprendre le justifier, justifier-items et justifier-contenu dans la grille CSS

votre confusion concernant les similitudes et les différences entre ces trois Les propriétés sont compréhensibles, car la documentation se concentre souvent sur la boîte flexible plutôt que sur la grille. Pour clarifier:

1. Relation entre les propriétés flex-box et la grille

Les propriétés de justification-self et de justifage-items ne sont pas implémentées dans Flex-Box. Cette distinction provient de la nature unidimensionnelle de Flex-Box, ce qui rend impossible la justification d'un seul élément. Par conséquent, Flex-Box s'appuie sur la propriété Justify-Content pour l'alignement le long de l'axe principal.

2. Rôles de justifier-self, justify-items, et justify-content

• justify-content : aligne toute la grille le long de l'axe de ligne. Cette propriété contrôle l'espacement entre les éléments de la grille dans la direction horizontale.
• Justify-items : aligne le contenu dans les éléments de grille individuels le long de l'axe de ligne. Il affecte l'alignement du contenu dans les cellules de la grille.
• Justify-self : aligne l'élément de grille actuel dans sa cellule de grille parent le long de l'axe de ligne. Cette propriété ajuste individuellement l'alignement d'éléments de grille spécifiques.

3. Différences clés

L'aide visuelle suivante fournit une démonstration claire des distinctions entre ces propriétés:

[image de la mise en page de la grille avec différents alignements de contenu, des éléments de grille et la grille lui-même]

Ressources supplémentaires

Pour plus d'informations, reportez-vous à ce qui suit Articles:

• https://developer.mozilla.org/en-us/docs/web/css/css_grid_layout/box_alignment_in_css_gr id_layout
• https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/