アイテムの整列とコンテンツの整列:​​ グリッド レイアウトでいつ、どのように使用するか?

グリッド レイアウトの align-items と align-content の違いを理解する

グリッド レイアウトに関する包括的なガイドを参照しているにもかかわらず、 「align-items」コンテナプロパティと「align-content」コンテナプロパティの違いに関する質問があります。明確にするために、用語を詳しく説明します。

• グリッド コンテナ: グリッドの書式設定コンテキストを確立する最も外側のコンテナ。
• グリッド:グリッド項目を含むボックス (グリッド領域) にコンテナを分割する垂直線と水平線のグリッド。
• グリッド項目: グリッド コンテナーのコンテンツ フロー内に配置されるボックス。

セル内のグリッド項目を整列するには、align-items と justify-items を使用し、justify-content と align-content グリッド全体をコンテナ内で整列させます。

ここで、よくある誤解を解いてみましょう:

主張: 「-content」プロパティが存在するのは、グリッドはコンテナよりも小さい場合があり、位置合わせ用のスペースが確保されています。

修正: グリッド サイズがコンテナより小さい場合は、「-content」プロパティと「-items」プロパティの両方が適用されます。ただし、「-content」プロパティのみがグリッド全体の配置に影響を及ぼし、コンテナ内の位置を変更します。

たとえば、以下の図では、グリッドがコンテナよりも小さく、スペースが残っています。 align-content: center を使用してグリッドを垂直方向に中央揃えにし、justify-content: end を使用して右揃えにします。

[グリッド レイアウトのイメージ]周囲にスペースあり]

対照的に、グリッド サイズがコンテナと一致する場合、配布するスペースがなく、align-content / justify-content

覚えておいてください。align-items と justify-items はグリッド領域内で個々のグリッド アイテムを整列させますが、align-content justify-content は、コンテナ内のグリッド全体を整列させます。この区別は、グリッドベースのデザインのレイアウトと位置を操作するときに重要です。

以上がアイテムの整列とコンテンツの整列:​​ グリッド レイアウトでいつ、どのように使用するか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。