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

Question

Je suis vraiment confus. Lorsque je cherche des ressources et de la documentation en ligne, la plupart des documents relatifs à ces propriétés semblent faire référence à Flex-box, et non à la grille. Et je ne sais pas dans quelle mesure la documentation relative aux propriétés équivalentes dans Flex-box est applicable à la grille.

Donc, j'ai essayé de référencer https://css-tricks.com/snippets/css/complete-guide-grid/ qui les définit comme suit :

justifie-items - Aligne le contenu d'un élément de la grille sur l'axe de la ligne.

justify-content - Cette propriété aligne la grille le long de l'axe de la ligne

se justifier - Aligne le contenu d'un élément de la grille sur l'axe de la ligne.

Mais je ne comprends toujours pas quelle est la différence entre les deux. J'ai donc 3 questions que je veux clarifier.

1. Est-ce que le justify-items dans Flex-box de la même manière que la propriété justify-items dans Grid ? ou sont-ils différents ? (En d'autres termes, puis-je réutiliser la documentation Flex-box pour la grille ?)
2. Que font le contenu (justifié), le soi et les éléments ?
3. En quoi le contenu (justifié), le soi et les éléments sont-ils différents ?

Toute clarification serait grandement appréciée.

Editar: Puisque tout le monde continue à me donner des ressources sur le Flex-box, je pose une question sur le css-grid, PAS sur le Flex-box.

Answer 1

Pour répondre à vos questions :

1

Comme le mentionne reiallenramos, "Les propriétés justify-self et justify-items ne sont pas implémentées dans flexbox. Cela est dû à la nature unidimensionnelle de flexbox, et au fait qu'il peut y avoir plusieurs éléments le long de l'axe, ce qui rend impossible la justification d'un seul élément. Pour aligner les éléments le long de l'axe principal, en ligne, dans flexbox, vous utilisez la propriété justify-content." - MDN

2-3

Cette capture d'écran de W3 fait un excellent travail en montrant ce qu'ils font et les différences entre eux.

Bon à savoir :

Pour plus d'informations et d'exemples, je vous suggère de consulter le site :

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
• https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
• https://www.smashingmagazine.com/2017/12/grid-inspector/

Et pour un peu d'inspiration :

• https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/

Answer 2

Les principales différences entre justify-content, justify-items et justify-self de Grille CSS:

• L' justify-content de la propriété permet de contrôler l'alignement de colonnes de la grille. Il est situé sur la grille récipient. Il ne s'applique pas aux ou de contrôle de l'alignement des éléments de la grille.
• L' justify-items de la propriété permet de contrôler l'alignement des éléments de la grille. Il est situé sur la grille récipient.
• L' justify-self des remplacements de propriété justify-items sur les éléments individuels. Il est situé sur les éléments de la grille et hérite de la valeur de justify-items, par défaut.

---

Exemple

Voici une 2x3 grille.

• 2 colonnes, chacune de 100px de large
• 3 rangées, chaque 50px de haut

Le conteneur:

• 500px de large
• 250px de hauteur

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

---

justify-content

L' justify-content propriété aligne les colonnes à l'intérieur du conteneur.

.container {
  justify-content: space-between;
}

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

Avec justify-content: space-between les deux colonnes sont épinglés sur les bords. Les éléments de la grille en majuscule uniquement parce qu'ils existent à l'intérieur de ces colonnes. Ils sont par ailleurs inchangée.

Notez que cette propriété ne fonctionne que quand il y a de l'espace libre dans le conteneur. Si l'une des colonnes étaient de la taille d' fr, alors tout l'espace libre soit consommé, et justify-content serait sans effet.

---

justify-items

L' justify-items propriété aligne les éléments de la grille à l'intérieur de leurs pistes (pas la totalité du conteneur)

.container {
  justify-items: center;
}

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

Avec justify-items: center les éléments de la grille sont centrés à l'intérieur de leurs colonnes.

---

justify-self

L' justify-self des remplacements de propriété justify-items sur les éléments individuels.

.container        { justify-items: center;}
.box:nth-child(2) { justify-self: start; }
.box:nth-child(3) { justify-self: end; }
.box:nth-child(6) { justify-self: stretch; }


.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

---

align-content, align-items et align-self

Ces propriétés font de même que leur justify-* homologues, mais dans la direction perpendiculaire.

Plus ici: Quelle est la différence entre alignez-les éléments de vs alignez-le contenu de la Grille de Mise en page?

---

Spec De Référence

10.3. Ligne-Alignement de l'axe: l' justify-self et justify-items propriétés

Éléments de la grille peut être aligné dans la ligne de dimension à l'aide de la justify-self bien sur la grille de l'élément ou de l' justify-itemsde la propriété sur la grille récipient.

10.4. La colonne de l'axe d'Alignement: l' align-self et align-items propriétés

Éléments de la grille peut également être aligné dans le bloc de dimension (perpendiculaire pour le inline dimension) à l'aide de l' align-self bien sur la grille de point ou align-items bien sur la grille de conteneur.

10.5. L'alignement de la Grille: l' justify-content et align-content propriétés

Si la grille de l' bords extérieurs ne correspondent pas à la grille du conteneur le contenu des bords (par exemple, si aucune colonne n'est flex-taille), la grille les pistes sont alignés à l'intérieur de la boîte de contenu selon la justify-content et align-content propriétés sur la grille le conteneur.

^{(emphase ajoutée)}

---

Boîte CSS Alignement du Module

Vous avez écrit:

Est l' justify-items propriété dans Flex-zone de la même que l' justify-items propriété dans la Grille?

Bien que la flexion et de la Grille de spécifications de fournir leurs propres définitions pour le mot-clé propriétés d'alignement, comme justify-items et align-content, le W3C est dans le processus de l'élimination progressive des propriétés d'alignement pour chaque zone de modèles et la mise en œuvre de leur nouvelle Zone d'Alignement Module, qui vise à définir un ensemble de propriétés d'alignement pour une utilisation sur tous les modèles boîte.

À partir de la flexbox spec:

1.2. Module interactions

La Boîte CSS Alignement Module étend et remplace les définitions de les propriétés d'alignement (justify-content, align-items, align-self, align-content) introduite ici.

Il y a des références similaires dans la Grille de spécifications.

Answer 3

OK, je pense avoir trouvé la solution grâce à Michael_B. Ma confusion venait du fait que, parfois, les différentes propriétés ne changeaient rien à la disposition de la grille.

justify-content vous permet de positionner la grille dans son conteneur. C'est pourquoi la propriété justify-content n'aura aucun effet si le conteneur de grille a la même taille que la grille. (Ce qui est toujours le cas si vous utilisez les unités fr). C'est également pour cette raison qu'elle peut avoir les valeurs : space-around, space-between et space-evenly (en plus de start, end, center et stretch), ce qui permet de briser la grille et de placer les éléments de la grille dans le conteneur de la grille. Il s'agit d'une propriété de l'élément conteneur de grille .

justifie-items vous permet de définir une position par défaut pour le contenu placé dans les éléments de la grille (un élément de la grille étant une case de la grille, comme défini dans le billet de Michael_B). Il s'agit d'une propriété de l'élément conteneur de grille .

se justifier vous permet de remplacer la position par défaut du contenu d'une cellule individuelle. La position définie par justify-items est ainsi remplacée. Par conséquent, si vous utilisez justify-self sur tous les enfants du conteneur, la définition de justify-items sur le conteneur de la grille n'aura aucun effet. Il s'agit d'une propriété de l'élément le contenu d'un élément de la grille .

Remarque : si vous faites d'un élément de grille une grille en soi (en d'autres termes, le contenu d'un élément de grille est une grille), vous pouvez le positionner dans l'élément de grille externe à l'aide de la propriété justify-self ou de la propriété justify-content du conteneur de grille de la grille interne, puisque le conteneur de grille de la grille interne est l'un des contenus des éléments de grille de la grille externe.

Comme vous pouvez vous y attendre, tout ceci s'applique également aux propriétés align-*.

S'il vous plaît, corrigez-moi si je me trompe.

Answer 4

justify-content est utilisé pour positionner l'ensemble de la grille le long de l'axe ligne/ligne du conteneur de grille lorsque la taille totale des éléments de la grille est inférieure à celle du conteneur de grille.

justify-items est utilisé sur un conteneur de grille et permet de déterminer la manière dont les éléments de la grille sont répartis le long d'une ligne en définissant la valeur par défaut du paramètre justify-self pour toutes les boîtes enfant.

justify-self est utilisé pour définir la façon dont un élément de grille individuel se positionne le long de l'axe rangée/ligne. Les éléments de la grille héritent de la valeur de la propriété justify-items du conteneur par défaut, donc si la propriété justify-self est définie, elle remplacera la valeur héritée de la valeur justify-items valeur.

Source : Alèse de la grille CSS de Codecademy

Answer 5

Se justifier sert à aligner la position du contenu dans sa cellule. horizontalement .

Alors que align-self sert à aligner la position du contenu dans sa cellule. verticalement .

Voici le résultat pour l'alignement des éléments en utilisant justify-self: start;

LE RÉSULTAT POUR LE CODE justify-self: start;