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

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

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

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

セル内でグリッド アイテムを整列するには、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 サイトの他の関連記事を参照してください。