CSS グリッドの「justify-content」、「justify-items」、「justify-self」の違いは何ですか?

CSS グリッドの justify-self、justify-items、および justify-content の違いを理解する

CSS グリッド レイアウトでは、さまざまな機能が提供されます。グリッド要素を整列および分散するためのプロパティ。ただし、justify-self、justify-items、および justify-content の類似点と相違点をナビゲートするのは混乱する可能性があります。この記事は、それらの違いを明確にすることを目的としています。

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

justify-self や justify-items とは異なり、justify-items は Flexbox のプロパティではありません。これは、Flexbox の 1 次元の性質によるもので、軸に沿って複数のアイテムを整列させると困難が生じます。 Flexbox では、justify-content が項目の配置の主な手段として機能します。

2. justify-content、justify-self、justify-items の目的

• justify-content: グリッド項目を行軸 (水平) に沿って配置し、確実に配置します。グリッド コンテナ内に均等に分散されます。
• justify-items:各グリッド項目内のコンテンツを行軸に沿って配置し、子要素の水平方向の配置を調整します。
• justify-self: グリッド行内の特定のグリッド項目の配置を制御します。個々のアイテムの配置をより詳細に制御できるようになります。

3. justify-content、justify-self、justify-items の違い

主な違いは、制御のスコープとレベルにあります:

• スコープ: justify-content は、行内のすべてのグリッド項目の配置に影響しますが、justify-self と justify-items は個々のレベルで機能しますグリッド項目とそのコンテンツ。
• 粒度: justify-content は行全体の配置オプションを提供し、justify-self は行内の個々の項目の配置を可能にし、justify-itemsこれらの項目内のコンテンツの配置を処理します。

さらなるリソース理解

• Mozilla Developer Network: CSS グリッド レイアウト ボックスの配置
• Smashing Magazine: 本番対応の CSS グリッド レイアウトの構築
• Smashing Magazine: CSS グリッドInspector

感動的な例

• Smashing Magazine: CSS Grid Challenge 2017 受賞者

以上がCSS グリッドの「justify-content」、「justify-items」、「justify-self」の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。