Quelle est la différence entre \"align-items\" et \"align-content\" dans la disposition en grille CSS ?

Comprendre la distinction entre « align-items » et « align-content » dans Grid Layout

Le module Grid Layout présente deux ensembles de propriétés, « justifier/aligner les éléments » et « justifier/aligner le contenu », qui jouent des rôles distincts dans l'alignement des éléments de la grille et de la grille elle-même dans un conteneur de grille.

Clarification de la terminologie de la grille

• Grid Container : Le conteneur parent qui définit l'espace global de la grille.
• Grid : Une grille structurée de lignes qui divise le conteneur de grille dans les zones de grille.
• Éléments de grille : Boîtes qui contiennent du contenu entrant dans les zones de grille.

Aligner les éléments contre. Align-content

Les propriétés "align-items" et "align-content", comme leurs noms l'indiquent, alignent respectivement les éléments de la grille et la grille. Plus précisément :

• justify-content et align-content alignent les pistes de la grille dans la zone de contenu du conteneur de grille.
• justify-self et justify-items alignent les éléments de la grille dans la dimension en ligne (horizontale par défaut).
• align-self et align-items aligner les éléments de la grille dans la dimension du bloc (verticale par défaut).

Répondre à la revendication de l'auteur

L'affirmation de l'auteur selon laquelle le " Les propriétés -content" existent car "parfois la taille totale de votre grille peut être inférieure à la taille de son conteneur de grille" met en évidence ce qui suit :

• Lorsque la grille est plus petite que le conteneur de grille, il y a espace libre disponible.
• Les propriétés "justify-content" et "align-content" peuvent utiliser cet espace pour aligner la grille au centre ou autrement dans le conteneur.
• En revanche, si la grille size est égal à la taille du conteneur, il n'y a pas d'espace libre et ces propriétés d'alignement n'ont aucun effet.

Illustrations pour plus de clarté

[Image d'illustration du W3C affichant une grille plus petite que son conteneur, avec "justify-content" et "align-content" alignant la grille à l'intérieur du conteneur.]

Extrait de la spécification

Pour plus de clarté, des extraits pertinents de la spécification CSS Grid Layout sont fournis :

• "Les éléments de la grille peuvent être alignés dans la dimension en ligne en utilisant la propriété justification-self sur l'élément de grille ou la propriété justifier-éléments sur le conteneur de grille."
• "Les éléments de grille peuvent également être aligné dans la dimension du bloc en utilisant la propriété align-self sur l'élément de grille ou la propriété align-items sur le conteneur de grille."
• "Si les bords extérieurs de la grille ne correspondent pas aux bords du contenu du conteneur de grille, le les pistes de la grille sont alignées dans la zone de contenu en fonction des propriétés justifier-contenu et align-content sur le conteneur de grille."

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!