<display-legacy>

語法

有效的 <display-legacy> 值

inline-block

該元素生成一個塊級元素框，它將像單個行內框一樣與周圍內容流動（行為很像替換元素）。

它等同於 inline flow-root。

inline-table

inline-table 值在 HTML 中沒有直接的對映。它的行為類似於 HTML <table> 元素，但作為行內框而不是塊級框。表格框內部是一個塊級上下文。

它等同於 inline table。

inline-flex

該元素表現為行內元素，並根據彈性盒模型佈局其內容。

它等同於 inline flex。

inline-grid

該元素表現為行內元素，並根據網格模型佈局其內容。

它等同於 inline grid。

正式語法

<display-legacy> = 
  inline-block  |
  inline-table  |
  inline-flex   |
  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。

.container {
  display: inline flex;
}

規範

瀏覽器相容性

css.properties.display.inline-block

css.properties.display.inline-table

css.properties.display.inline-flex

css.properties.display.inline-grid

另見

• display
  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-internal>
  • <display-box>