レイアウトモード

CSSレイアウトモード (または単に「レイアウト」) は、ボックスの位置やサイズを、兄弟要素や祖先要素のボックスとの相互作用を踏まえて決めるアルゴリズムです。複数のレイアウトモードがあります。

  • 通常フロー — すべての要素は何かの操作をして外さない限り、通常フローの一部です。通常フローは、段落のようなボックスをレイアウトするためのブロックレイアウトと、テキストのような行内アイテムをレイアウトするためのインラインレイアウトを含みます。
  • 表レイアウトは、表のレイアウトのためのものです。
  • 浮動レイアウトは、アイテムを左または右に配置して、残りの部分はそれを回り込む通常フローにするためのものです。
  • 位置指定レイアウトは、他要素とほとんど相互作用のない位置指定要素のためのものです。
  • 段組みレイアウトは、新聞のように複数の段でコンテンツをレイアウトするためのものです。
  • フレックスボックスレイアウトは、滑らかに大きさが変更できる複雑なページのレイアウトに使われます。
  • グリッドレイアウトは、固定グリッドを基準にした要素配置に使われます。

メモ: レイアウトモードによって、使える CSS プロパティに制限があります。多くは 1 つか 2 つのレイアウトモードで用いられ、別のレイアウトモードに関わる要素に設定しても効果がありません。

関連情報