Align-Items と Align-Content: 「-Content」が実際に重要になるのはどのような場合ですか?

グリッド レイアウトにおける Align-Items と Align-Content の区別

グリッド レイアウトを使用する場合、「揃え/整列」の区別を理解する-items」と「justify/align-content」が重要です。この記事は、特にグリッド サイズがコンテナーよりも小さいシナリオにより "-content" プロパティが存在するという主張に関して、それらの違いを明確にすることを目的としています。

用語の定義

• グリッド コンテナ: グリッドとグリッド アイテムの両方の親コンテナで、グリッドの書式設定コンテキストを確立します。
• グリッド: 垂直方向と交差するグリッド項目を含むグリッド領域にコンテナを分割する水平線。
• グリッド項目: グリッド コンテナ内のインフロー コンテンツ ボックス。

整列-Content と Align-Items

• Align-Content: コンテナ内のグリッドを整列させます。
• Align-Items: グリッド内でグリッド項目を配置します。

「-Content」プロパティの明確化

「-content」プロパティは、グリッドが存在するという理由だけで存在するという主張コンテナより小さいと誤解を招く可能性があります。提供されている図では、グリッドは実際に小さくなっているため、align-content でグリッドを垂直方向の中央に配置し、justify-content で右揃えにできるスペースが確保されています。ただし、グリッド サイズがコンテナ サイズと等しい場合、余分なスペースがないため視覚効果はありませんが、これらのプロパティは引き続き適用されます。

仕様の概要

• justify-self/justify-items: グリッド項目のインライン軸配置。
• align-self/align-items: グリッド項目の軸配置をブロックします。
• justify-content/align-content: コンテナーの外側の端がコンテナーのコンテンツの端と揃っていない場合の、コンテナー内のグリッドの位置合わせ。

以上がAlign-Items と Align-Content: 「-Content」が実際に重要になるのはどのような場合ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。