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

Patricia Arquette
リリース: 2024-10-31 15:07:02
オリジナル
810 人が閲覧しました

Align-items vs. Align-content: When and How to Use Them in Grid Layout?

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

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

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

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

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

主張: 「-content」プロパティが存在するのは、グリッドがそのコンテナより小さい可能性があり、配置。

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

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

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

対照的に、グリッド サイズがコンテナーと一致すると、配布するスペースがなく、 align-content / justify-content は効果がありません。

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!