CSS グリッド レイアウトの「align-items」と「align-content」の違いは何ですか?

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

Grid Layout モジュールでは、次の 2 つのセットが導入されています。プロパティ「justify/align-items」と「justify/align-content」。これらは、グリッド コンテナ内でグリッド項目とグリッド自体を配置する際に異なる役割を果たします。

グリッド用語の明確化

• グリッド コンテナ: 全体的なグリッド空間を定義する親コンテナ。
• グリッド: を分割する線の構造化グリッド。グリッド コンテナをグリッド領域に配置します。
• グリッド アイテム: グリッド領域内のフロー コンテンツを含むボックス。

項目の整列とAlign-content

「align-items」プロパティと「align-content」プロパティは、その名前が示すように、それぞれグリッド項目とグリッドを整列させます。具体的には:

• justify-content と align-content は、グリッド コンテナーのコンテンツ ボックス内のグリッド トラックを位置合わせします。
• justify-self と justify-items は、グリッド項目をインライン次元で整列させます (デフォルトでは水平)。
• align-self と align-items ブロックの寸法でグリッド項目を整列します (デフォルトでは垂直)。

著者の主張への対処

著者の主張は、「 「-content」プロパティが存在するのは、「グリッドの合計サイズがグリッド コンテナのサイズよりも小さい場合がある」ため、次のことが強調表示されます:

• グリッドがグリッド コンテナより小さい場合、利用可能な空き領域。
• 「justify-content」プロパティと「align-content」プロパティは、この領域を利用してグリッドを中央に配置するか、コンテナ内のグリッドを配置できます。
• 対照的に、グリッドがサイズはコンテナのサイズと等しく、空き領域はなく、これらの配置プロパティは効果がありません。

Clarity のイラスト

[W3C からのイラストの画像]コンテナより小さいグリッドを表示し、「justify-content」と「align-content」でコンテナ内でグリッドを整列させます。]

仕様からの抜粋

明確にするために、CSS グリッド レイアウト仕様からの関連する抜粋を示します。

• "グリッド項目の justify-self プロパティまたはグリッド コンテナーの justify-items プロパティを使用することで、グリッド項目をインライン ディメンションに配置できます。"
• "グリッド項目は、グリッド項目の align-self プロパティまたはグリッド コンテナの align-items プロパティを使用して、ブロック次元で位置合わせされます。"
• "グリッドの外側のエッジがグリッド コンテナのコンテンツのエッジに対応しない場合、グリッド トラックは、グリッド コンテナーの justify-content プロパティと align-content プロパティに従って、コンテンツ ボックス内で整列されます。"

以上がCSS グリッド レイアウトの「align-items」と「align-content」の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。