--- title: slug: Web/CSS/display-legacy tags: - CSS - CSS Data Type - CSS Display - Data Type - Reference - display-legacy translation_of: Web/CSS/display-legacy ---
{{CSSRef}}

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

構文

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

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

これは inline flow-root と等価です。
inline-table
inline-table は、 HTML には直接的に対応するものがありません。これは、 HTML の {{HTMLElement("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;
}

結果

{{EmbedLiveSample("Examples", 300, 150)}}

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

.container {
  display: inline flex;
}

仕様書

仕様書 状態
{{SpecName('CSS3 Display', '#typedef-display-legacy', 'display-legacy')}} {{Spec2('CSS3 Display')}}

ブラウザーの互換性

inline-block の対応

{{Compat("css.properties.display.inline-block", 10)}}

inline-table の対応

{{Compat("css.properties.display.inline-table", 10)}}

inline-flex の対応

{{Compat("css.properties.display.inline-flex", 10)}}

inline-grid の対応

{{Compat("css.properties.display.inline-grid", 10)}}

関連情報