CSS グリッド レイアウトにおける「justify-content」、「justify-items」、および「justify-self」はどのように異なりますか?

CSS グリッドの justify-self、justify-items、justify-content について

これらの類似点と相違点に関する混乱ドキュメントではグリッドではなくフレックスボックスに焦点を当てていることが多いため、3 つのプロパティがあることは理解できます。明確にするために:

1.フレックスボックスとグリッド プロパティの関係

justify-self プロパティと justify-items プロパティはフレックスボックスには実装されていません。この区別は、Flex-box の一次元の性質に由来しており、単一の項目を位置揃えすることが不可能です。したがって、Flex-box は、主軸に沿った配置について justify-content プロパティに依存します。

2. justify-self、justify-items、および justify-content の役割

• justify-content: グリッド全体を行軸に沿って配置します。このプロパティは、水平方向のグリッド項目間の間隔を制御します。
• justify-items: 個々のグリッド項目内のコンテンツを行軸に沿って配置します。これは、グリッド セル内のコンテンツの配置に影響します。
• justify-self: 親グリッド セル内の現在のグリッド アイテムを行軸に沿って配置します。このプロパティは、特定のグリッド項目の配置を個別に調整します。

3.主な違い

次の視覚補助は、これらのプロパティの違いを明確に示しています:

[コンテンツ、グリッド項目、およびグリッドの配置が異なるグリッド レイアウトの画像それ自体]

追加リソース

詳細洞察については、以下を参照してください記事:

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

以上がCSS グリッド レイアウトにおける「justify-content」、「justify-items」、および「justify-self」はどのように異なりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。