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

グリッド レイアウトでの項目の整列とコンテンツの整列:​​ 詳細な違い

グリッド レイアウトでは、項目の整列とコンテンツの整列プロパティは、コンテナ内で目的の項目とグリッドの配置を実現するために重要です。ただし、それぞれの役割が異なるため、混乱が生じる可能性があります。

用語の明確化:

• グリッド コンテナ: グリッド領域を定義する周囲の要素.
• グリッド: コンテナを領域に分割する垂直線と水平線のマトリックス。
• グリッド項目: グリッド領域内に含まれるコンテンツ ブロック.

Align-Items vs. Align-Content:

-Items: 個々のグリッド内のグリッド アイテムの配置を制御します
-Content: コンテナ内のグリッド全体の配置を制御します。

違いを理解する:

justify-content と align-content は、グリッド サイズがコンテナ サイズより小さい場合にのみ適用されるという考えから誤解が生じます。ただし、これは -items プロパティと -content プロパティの両方に当てはまります。

グリッドがコンテナ内に完全に収まる場合、配置のためにコンテナを配置するスペースはありません。このような場合、-items と -content の配置はどちらも効果がありません。

グラフィック例:

グリッド コンテナが 3 つの等しいサイズの領域に垂直に分割されていると考えてください。グリッド項目は 2 番目と 3 番目の領域に配置されます。グリッドとコンテナーのサイズが異なります。

Align-Items:

• align-items: center;項目をそれぞれの領域内で垂直方向に整列させます。
• justify-items: center;項目を領域内で水平に整列させます。

Align-Content:

• justify-content: center;コンテナ内でグリッドを水平方向に配置します。
• align-content: center;コンテナ内でグリッドを垂直に配置します。

結論:

-Items プロパティは、グリッド コンテナの指定された寸法に従ってグリッド領域内のアイテムを配置します。
-コンテンツのプロパティは、利用可能なスペースやオーバーハングを考慮して、コンテナ内でグリッド全体を整列させます。

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