CSSグリッドのjustify-self、justify-items、justify-contentの違い
私は本当に混乱しています。オンラインリソースとドキュメントを探しているとき、これらのプロパティのドキュメントのほとんどはグリッドではなくFlex-boxを参照しているようです。また、Flex-boxの同等のプロパティのドキュメントがグリッドにどのように適用できるかわかりません。
だから、私は https://css-tricks.com/snippets/css/complete-guide-grid/ を参照しようとしました。
justify-items-グリッド項目内のコンテンツを行軸に沿って整列します
justify-content-このプロパティは、行軸に沿ってグリッドを整列します
justify-self-グリッド項目内のコンテンツを行軸に沿って整列します
しかし、私はそれらの違いが何であるかまだ理解していません。だから、私は明確にしたい3つの質問があります。
- Flex-boxの
justify-itemsプロパティは、Gridのjustify-itemsプロパティと同じですか？それとも何らかの形で違いますか？ （言い換えると、グリッド用のFlex-boxドキュメントを再利用できますか） - （正当化）コンテンツ、自己、アイテムは何をしますか？
- （正当化）コンテンツ、自己、アイテムはどのように異なりますか？
明確化をいただければ幸いです。
Edit：誰もがFlex-boxリソースを提供し続けるので、Flex-Boxではなくcss-gridについて尋ねています。
質問に答えるには：
1
Reiallenramosが述べたように、「justify-selfおよびjustify-itemsプロパティはflexboxに実装されていません。これはflexboxの1次元の性質によるものであり、軸に沿って複数のアイテムがあり、単一のitem。flexboxのメインのインライン軸に沿ってアイテムを整列するには、justify-contentプロパティを使用します。 " - MDN
2-3
W からのこのスクリーンショットは、それらが何をするか、そしてそれらの違いを示す素晴らしい仕事をしています。 
知っておきたいこと：
詳細と例については、チェックアウトすることをお勧めします。
- 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/
そして、いくつかのインスピレーションのために：
CSSグリッドのjustify-content、justify-itemsおよびjustify-selfの主な違い：
justify-contentプロパティは、グリッド列の配置を制御します。 grid containerに設定されます。グリッドアイテムの配置には適用または制御されません。justify-itemsプロパティは、グリッドアイテムの配置を制御します。 grid containerに設定されます。justify-selfプロパティは、個々のアイテムのjustify-itemsをオーバーライドします。 grid itemsに設定され、デフォルトでjustify-itemsの値を継承します。
例
これが2x3グリッドです。
- 各列が100ピクセル幅の2列
- 3行、各高さ50ピクセル
コンテナは次のとおりです。
- 幅500ピクセル
- 高さ250ピクセル
.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
justify-contentプロパティは、コンテナ内でcolumnsを揃えます。
.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>justify-content: space-betweenを使用すると、両方の列が端に固定されます。グリッド項目は、それらの列内に存在するためにのみシフトします。それ以外は影響を受けません。
このプロパティは、コンテナに空き領域がある場合にのみ機能することに注意してください。いずれかの列のサイズがfrである場合、すべての空き領域が消費され、justify-contentは効果がありません。
justify-items
justify-itemsプロパティは、（コンテナ全体ではなく）トラック内でグリッド項目を整列します
.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>justify-items: centerを使用すると、グリッドアイテムは列の中央に配置されます。
justify-self
justify-selfプロパティは、個々のアイテムのjustify-itemsをオーバーライドします。
.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およびalign-self
これらのプロパティは、対応するjustify-*と同じですが、垂直方向にあります。
詳細： グリッドレイアウトのalign-itemsとalign-contentの違いは何ですか？
スペックリファレンス
10.3。行軸の配置：
justify-selfおよびjustify-itemsプロパティグリッドアイテムは、グリッドアイテムの
justify-selfプロパティまたはグリッドのjustify-itemsプロパティを使用してインラインディメンションに配置できます容器。10.4。列軸の配置：
align-selfおよびalign-itemsプロパティグリッド項目は、グリッド項目の
align-selfプロパティまたはalign-itemsグリッドコンテナーのプロパティ。10.5。グリッドの整列：
justify-contentおよびalign-contentプロパティグリッドの外縁がグリッドコンテナのコンテンツ縁に対応していない場合（たとえば、フレックスサイズの列がない場合）、グリッドトラックは整列されますグリッドコンテナの
justify-contentおよびalign-contentプロパティに応じたコンテンツボックス内。（強調を追加）
CSSボックスアライメントモジュール
書きました：
Flex-boxの
justify-itemsプロパティは、Gridのjustify-itemsプロパティと同じですか？
FlexおよびGridの仕様では、justify-itemsやalign-contentなどのキーワード配置プロパティの独自の定義が提供されていますが、W3Cは個々のボックスモデルの配置プロパティを段階的に廃止し、新しいものを実装しています- Box Alignment Module 。これは、すべてのボックスモデルで使用する位置合わせプロパティのセットを定義しようとします。
flexbox仕様から：
CSSボックスアライメントモジュールは、ここで紹介したアライメントプロパティ（
justify-content、align-items、align-self、align-content）の定義を拡張および置き換えます。
Grid仕様にも同様の参照があります。
OK、Michael_Bのおかげでわかったと思います。私の混乱は、異なるプロパティがグリッドのレイアウトについて何もランダムに変更しない場合があるという事実から生じました。
justify-contentグリッドコンテナ内にグリッドを配置できます。これが、グリッドコンテナーがグリッドと同じサイズの場合、justify-contentプロパティが効果を持たない理由です。 （fr単位を使用する場合は常にそうです）。これはまた、グリッドを分割し、グリッドコンテナ内にグリッドアイテムを配置する値（スペースアラウンド、スペース間、スペース均等（開始、終了、中央、ストレッチに加えて））を持つことができる理由でもあります。これはgrid containerのプロパティです。
justify-itemsを使用すると、グリッドのグリッド項目（Michael_Bの投稿で定義されているグリッド内のボックスであるグリッド項目）に配置されたコンテンツのデフォルトの位置を設定できます。これはgrid containerのプロパティです。
justify-selfを使用すると、個々のセルのコンテンツのデフォルト位置をオーバーライドできます。これは、justify-itemsによって設定された位置をオーバーライドします。したがって、コンテナのすべての子に対してjustify-selfを使用する場合、グリッドコンテナにjustify-itemsを設定しても効果はありません。これは、グリッドアイテム内のコンテンツのプロパティです。
注：グリッド項目をグリッド自体にすると（つまり、グリッド項目内のコンテンツはグリッドになります）、justify-selfプロパティまたはjustify-contentを使用して、外側のグリッド項目内に配置できます。内側グリッドのグリッドコンテナは外側グリッドのグリッドアイテムのコンテンツの1つであるため、内側グリッドのグリッドコンテナのプロパティ。
ご想像のとおり、これはすべてalign- *プロパティにも適用されます。
何か問題があれば修正してください