<display-legacy>

CSS 2 では display プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。このページではこれらの値を詳しく紹介します。

構文

有効な <display-legacy> は以下のとおりです。

inline-block

この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。

これは inline flow-root と等価です。

inline-table

inline-table は、 HTML には直接的に対応するものがありません。これは、 HTML の <table> 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。表ボックスの内部はブロックレベルのコンテキストになります。

これは inline table と等価です。

inline-flex

要素は、インライン要素のようにふるまいつつ、その内容物をフレックスボックスモデルに従ってレイアウトします。

これは inline flex と等価です。

inline-grid

要素は、インライン要素のようにふるまいつつ、その内容物をグリッドモデルに従ってレイアウトします。

これは inline grid と等価です。

以下の例では、インラインフレックスコンテナーを従来型のキーワードである inline-flex で生成します。

html

<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
</div>

Not a flex item

css

.container {
  display: inline-flex;
}

新しい構文では、インラインフレックスコンテナーは二つの値を使用して生成され、外部表示種別が inline、内部表示種別が flex です。

css

.container {
  display: inline flex;
}

Specification
CSS Display Module Level 3 # typedef-display-legacy