CSS <display-legacy> Data Type

The CSS <display-legacy> data type represents legacy single-keyword values for the display property. These values combine an element's outer and inner display types into a single keyword and are retained for compatibility with established CSS syntax.

Syntax

The <display-legacy> data type accepts four legacy display keywords:

<display-legacy> = inline-block | inline-table | inline-flex | inline-grid

<display-legacy> Values

Value	Description
`inline-block`	Creates an inline-level box whose contents participate in flow layout within a flow-root formatting context.
`inline-table`	Creates an inline-level box whose contents participate in table layout.
`inline-flex`	Creates an inline-level flex container whose children participate in flex layout.
`inline-grid`	Creates an inline-level grid container whose children participate in grid layout.

Multi-keyword Syntax

Modern display syntax can express an element's outer and inner display types separately. The legacy keywords provide single-keyword equivalents for commonly used combinations.

Legacy Value	Equivalent Multi-keyword Value
`inline-block`	`inline flow-root`
`inline-table`	`inline table`
`inline-flex`	`inline flex`
`inline-grid`	`inline grid`

For example, display: inline-flex and display: inline flex describe the same combination of an inline outer display type and a flex inner display type.

<display-legacy> Example

The following example uses inline-flex to create an inline-level flex container:

.example {
  display: inline-flex;
  gap: 10px;
}

Browser Result

Item 1 Item 2 Item 3

The container participates in the surrounding layout as an inline-level box, while its children are laid out as flex items.

The <display-legacy> data type is used by the display property:

display

Specifications

The <display-legacy> data type is defined in the CSS Display Module Level 3 .

CSS <display-legacy> Data Type