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

謎の解明: CSS グリッドの justify-self、justify-items、および justify-content

justify-self、justify-items というよく知られた名前にもかかわらず、 CSS Grid の justify-content と justify-content は、Flexbox の対応するものとは大きく異なります。グリッド レイアウト内でのそれらの役割と区別を調べてみましょう。

機能の定義

• justify-content: 行軸に沿ったグリッド列の分布を制御します。
• justify-items: 個々のグリッド内でコンテンツを整列させます
• justify-self: 個々のグリッド項目を親グリッド行内の行軸に沿って配置します。

違いを理解する

これらのプロパティは、Flexbox の対応するプロパティといくつかの類似点を共有していますが、グリッド内では重要な違いがあります。 context.

• フレックスボックスとグリッドの違い: フレックスボックスとは異なり、CSS グリッドは justify-self と justify-items を実装しません。これは、軸に沿って複数のアイテムが存在できるという Flexbox の一次元の性質に由来します。
• アイテムとアイテムのコンテンツ: justify-items はグリッド アイテム内のコンテンツの配置に影響を与えますが、justify -self は、それぞれの行内でのグリッド項目自体の位置を制御します。

Visual説明

各プロパティの効果を視覚的に表現するには、添付のスクリーンショットを参照してください。

追加リソース

さらなるガイダンスとインスピレーションについては、次のリソースを検討してください。

• MDN: 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/
• CSS グリッド チャレンジ: https://www.smashingmagazine.com/2017/10/ css-grid-challenge-2017-winners/

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