web-dev-qa-db-fra.com

La différence entre justifier-soi, justifier-éléments et justifier-contenu dans CSS Grid

Je suis vraiment confus. Lorsque vous recherchez des ressources et de la documentation en ligne, la plupart de la documentation de ces propriétés semble faire référence à Flex-box, pas à 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.

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

justification-items - Aligne le contenu à l'intérieur d'un élément de la grille le long de l'axe de la ligne.

justification-contenu - Cette propriété aligne la grille le long de l'axe des lignes.

justifier-self - Aligne le contenu à l'intérieur d'un élément de la grille le long de l'axe de la ligne.

Mais je ne comprends toujours pas quelle est la différence entre eux. Donc, j'ai 3 questions que je veux clarifier.

  1. La propriété justify-items dans Flex-box est-elle identique à la propriété justify-items dans Grid? ou sont-ils différents d'une manière ou d'une autre? (En d'autres termes, puis-je réutiliser la documentation Flex-box pour Grid)
  2. Que font (justifier) ​​le contenu, soi-même et les objets?
  3. En quoi (justifier) ​​le contenu, le moi et les éléments sont-ils différents?

Toute clarification serait grandement appréciée.

Edit: Puisque tout le monde continue de me donner des ressources Flex-box, je pose des questions sur css-grid, PAS sur Flex-box.

csscss3css-grid
21
keithlee96

Pour répondre à vos questions:

1

Comme le mentionnait reiallenramos, "les propriétés justification-self et justification-items ne sont pas implémentées dans flexbox. Cela est dû à la nature unidimensionnelle de flexbox et au fait que plusieurs éléments peuvent se trouver le long de l'axe, rendant impossible Pour aligner les éléments le long de l'axe principal en ligne dans Flexbox, utilisez la propriété justification-contenu. " - MDN

2-3

Cette capture d'écran de W3 fait un excellent travail en montrant ce qu'ils font et les différences qui les séparent .  enter image description here

Bon à savoir:

Pour plus d'informations et d'exemple, je vous suggère de vérifier:

Et pour l'inspiration:

26
L Bahr

Différences principales entre justify-content, justify-items et justify-self dans la grille CSS:

  • La propriété justify-content contrôle l'alignement des colonnes de la grille. Il est défini sur le conteneur de la grille. Il ne s'applique pas à et ne contrôle pas l'alignement des éléments de la grille.
  • La propriété justify-items contrôle l'alignement des éléments de la grille. Il est défini sur le conteneur de la grille.
  • La propriété justify-self remplace justify-items sur des éléments individuels. Il est défini sur éléments de la grille} et hérite de la valeur de justify-items, par défaut.

Exemple

Voici une grille 2x3.

  • 2 colonnes de 100 pixels de large
  • 3 rangées de 50 pixels de haut

Le conteneur est:

  • 500px de large
  • Hauteur 250px

 enter image description here 

.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

La propriété justify-content aligne colonnes dans le conteneur.

 enter image description here 

.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ées aux bords. Les éléments de la grille sont décalés uniquement parce qu'ils existent dans ces colonnes. Ils ne sont autrement pas affectés.

Notez que cette propriété ne fonctionne que s'il y a de l'espace libre dans le conteneur. Si l'une des colonnes avait la taille fr, alors tout l'espace libre serait utilisé et justify-content n'aurait aucun effet.

justify-items

La propriété justify-items aligne éléments de la grille au sein de leurs traces (pas le conteneur entier)

 enter image description here 

.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 dans leurs colonnes.

justify-self

La propriété justify-self remplace justify-items sur des éléments individuels.

 enter image description here 

.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 la même chose que leurs contreparties justify-*, mais dans la direction perpendiculaire.

Plus ici: Quelle est la différence entre align-items et align-content dans Grid Layout?

Référence de spécification

10.3. Alignement de l'axe des lignes: le justify-self et le justify-items Propriétés

Les éléments de grille peuvent être alignés dans la dimension en ligne à l'aide de La propriété justify-self sur l'élément de grille ou la propriété justify-items sur le conteneur de la grille.

10.4. Alignement d'axe de colonne: le align-self et le align-items Propriétés

Les éléments de grille peuvent également être alignés dans la dimension du bloc (perpendiculaire à la dimension inline) à l'aide de la propriété align-self sur le fichier élément de grille ou propriété align-items sur le conteneur de grille.

10.5. Alignement de la grille: le justify-content et le align-content Propriétés

Si les bords extérieurs de la grille ne correspondent pas à ceux du conteneur de grille bords de contenu (par exemple, si aucune colonne n'est de taille flexible), la grille les pistes sont alignées dans la zone de contenu en fonction du justify-content et align-content propriétés sur la grille récipient.

(emphase ajoutée)

Module d'alignement de boîtes CSS

Tu as écrit:

La propriété justify-items dans Flex-box est-elle identique à la propriété justify-items dans Grid? 

Bien que les spécifications Flex et Grid fournissent leurs propres définitions pour les propriétés d'alignement des mots clés, telles que justify-items et align-content, le W3C est en train de supprimer progressivement les propriétés d'alignement de modèles de boîtes individuelles et d'implémenter leur nouveau module d'alignement de boîtes Box , qui cherche à définir un ensemble de propriétés d’alignement à utiliser dans tous les modèles de boîtes.

De la spécification flexbox:

1.2. Module interactions

Le module d’alignement des boîtes CSS étend et remplace les définitions de les propriétés d'alignement (justify-content, align-items, align-self, align-content) introduites ici.

Il existe des références similaires dans les spécifications de la grille.

15
Michael_B

OK, je pense que j'ai compris grâce à Michael_B. Ma confusion venait du fait que parfois des propriétés différentes ne changeaient rien au hasard sur la disposition de la grille.

justifier-contenu vous permet de positionner la grille dans son conteneur de grille. C'est pourquoi la propriété justification-contenu 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 des unités fr). C'est aussi pourquoi il peut avoir les valeurs suivantes: espace-autour, espace-entre et espace-égal (en plus du début, de la fin, du centre et de l'étirement), ce qui va briser la grille et placer les éléments de la grille dans le conteneur de grille. C'est une propriété du conteneur de grille . 

justification-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 dans la grille, comme défini dans l'article de Michael_B). C'est une propriété du conteneur de grille .

justifier-soi vous permet de remplacer la position par défaut du contenu dans une cellule individuelle. Cela annulera la position définie par les éléments-motivés. Par conséquent, si vous utilisez justification-self sur tous les enfants du conteneur, la définition des éléments de justification sur le conteneur de grille n'aura aucun effet. C'est une propriété du contenu de dans un élément de grille .

Remarque: Si vous faites d'un élément de grille une grille elle-même (autrement dit, 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é justification-self ou du contenu de justification. propriété sur le conteneur de grille de la grille interne, car le conteneur de grille de la grille interne est l'un des contenus des éléments de la grille de la grille externe.

Comme vous vous en doutez, tout cela s'applique également aux propriétés align- *.

S'il vous plaît corrigez-moi si j'ai quelque chose de mal

0
keithlee96

Justify-self 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 de l'alignement des éléments à l'aide de justify-self: start;

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

0
Zaid Ahmad