En quoi « align-items » et « align-content » diffèrent-ils dans la disposition de la grille CSS ?

Comprendre les différences entre Align-Items et Align-Content dans la disposition en grille CSS

Dans le guide complet de la disposition en grille, les concepts de « justifier/aligner les éléments " et les propriétés "justify/align-content" sont introduites. Bien que l'auteur suggère que les propriétés « -content » soient utilisées lorsque la taille de la grille est plus petite que son conteneur, ce concept s'applique aux deux ensembles de propriétés.

Définir les composants d'un système de grille

• Grid Container : L'élément parent qui entoure la grille et ses éléments, établissant le contexte de formatage.
• Grille : Une grille de lignes qui se croisent qui forme des zones pour les éléments de la grille à occuper.
• Éléments de la grille : Éléments placés dans les zones de la grille.

Alignement de la grille et des éléments de la grille

Le Les propriétés justifier-content et align-content contrôlent l'alignement de la grille dans son conteneur, tandis que justifier, justifier-éléments, align-self et align-items régissent l'alignement des éléments individuels de la grille.

Illustration le concept

Considérons une grille plus petite que son conteneur, comme indiqué ci-dessous :

[Image d'une disposition en grille avec un espace supplémentaire dans le conteneur]

Dans ce scénario, le Les propriétés justifier-content et align-content peuvent être utilisées pour distribuer l'espace supplémentaire. Par exemple, justifier-content : end aligne la grille à droite, tandis que align-content : center la centre verticalement.

Au-delà des considérations relatives à la taille

Même si la taille de la grille correspond à la taille du conteneur, alignez Les propriétés -content et justifier-content restent fonctionnelles. Ils activent des options d'espacement telles que l'espace autour, l'espace entre et l'espace uniformément, qui répartissent l'espace libre entre les pistes de la grille.

Points forts de la spécification

La spécification CSS Grid Layout clarifie les rôles de ces éléments. propriétés :

• 10.3 : Alignement de l'axe des lignes : justification et justification des éléments alignent les éléments de la grille horizontalement.
• 10.4 : Axe des colonnes Alignement : align-self et align-items alignent les éléments de la grille verticalement.
• 10.5 : Alignement de la grille : justification-content et align-content alignent la grille dans le conteneur si le les bords extérieurs de la grille ne correspondent pas aux bords du contenu du conteneur.

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!