CSS グリッド レイアウトにおける `align-items` と `align-content` はどのように異なりますか?

CSS グリッド レイアウトの Align-Items と Align-Content の違いを理解する

グリッド レイアウトの総合ガイドでは、「justify/align-items」の概念が説明されています。 " および "justify/align-content" プロパティが導入されました。著者は、グリッド サイズがそのコンテナよりも小さい場合に「-content」プロパティを使用することを提案していますが、この概念は両方のプロパティ セットに当てはまります。

グリッド システムのコンポーネントの定義

• Grid Container: グリッドとその項目を囲み、書式設定コンテキストを確立する親要素。
• Grid: 領域を形成する交差する線のグリッド占有するグリッド項目。
• グリッド項目: グリッド領域内に配置された要素。

グリッドとグリッド項目の配置

justify-content プロパティと align-content プロパティはコンテナ内のグリッドの配置を制御し、justify-self、justify-items、align-self、および align-items は個々のグリッド項目の配置を制御します。

図解コンセプト

以下に示すように、コンテナよりも小さいグリッドを考えます。

[コンテナ内に余分なスペースがあるグリッド レイアウトのイメージ]

このシナリオでは、 justify-content プロパティと align-content プロパティを使用して、余分なスペースを分配できます。たとえば、justify-content: end はグリッドを右揃えにし、align-content: center は垂直方向の中央揃えにします。

サイズに関する考慮事項を超えて

グリッド サイズがコンテナ サイズと一致する場合でも、整列します。 -content プロパティと justify-content プロパティは引き続き機能します。これらにより、スペースアラウンド、スペース間、スペース均等などの間隔オプションが有効になり、グリッド トラック間に空きスペースを分配します。

仕様のハイライト

CSS グリッド レイアウト仕様は、これらの役割を明確にしています。プロパティ:

• 10.3: 行軸の配置: justify-self および justify-items はグリッド項目を水平に配置します。
• 10.4: 列軸配置: align-self および align-items は、グリッド項目を垂直に配置します。
• 10.5: グリッドの配置: justify-content および align-content は、コンテナ内のグリッドを配置します。グリッドの外側の端がコンテナのコンテンツの端と一致しません。

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