<display-legacy>

CSS 2 used a single-keyword syntax for the display property, requiring separate keywords for block-level and inline-level variants of the same layout mode. This page details those values.

Syntax

Valid <display-legacy> values:

inline-block

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

It is equivalent to inline flow-root.

inline-table

The inline-table value does not have a direct mapping in HTML. It behaves like an HTML <table> element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.

It is equivalent to inline table.

inline-flex

The element behaves like an inline element and lays out its content according to the flexbox model.

It is equivalent to inline flex.

inline-grid

The element behaves like an inline element and lays out its content according to the grid model.

It is equivalent to inline grid.

Formal syntax

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

Examples

In the below example, we are creating an inline flex container with the legacy keyword inline-flex.

HTML

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

Not a flex item

CSS

css
.container {
  display: inline-flex;
}

Result

In the new syntax the inline flex container would be created using two values, inline for the outer display type, and flex for the inner display type.

css
.container {
  display: inline flex;
}

Specifications

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

Browser compatibility

css.properties.display.inline-block

BCD tables only load in the browser

css.properties.display.inline-table

BCD tables only load in the browser

css.properties.display.inline-flex

BCD tables only load in the browser

css.properties.display.inline-grid

BCD tables only load in the browser

See also