Web/CSS/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.

Examples

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

HTML

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

Not a flex item

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.

.container { 
  display: inline flex; 
}

Specifications

Specification	Status
CSS Display Module Level 3The definition of 'display-legacy' in that specification.	Candidate Recommendation

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Support of inline-block

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
inline-block	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 8 Full support 8 Partial support 6 Notes' Notes' Until Internet Explorer 8, inline-block is only for natural inline elements.	Opera Full support 7	Safari Full support 1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 1	Samsung Internet Android Full support 1.0

Legend

Full support  

Full support

See implementation notes.'

See implementation notes.

Support of inline-table

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
inline-table	Chrome Full support 1	Edge Full support 12	Firefox Full support 3	IE Full support 8	Opera Full support 7	Safari Full support 1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 1	Samsung Internet Android Full support 1.0

Legend

Full support  

Full support

Support of inline-flex

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
inline-flex	Chrome Full support 29 Full support 29 Full support 21 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12	Firefox Full support 20 Notes' Full support 20 Notes' Notes' Firefox 28 added multi-line flexbox support. No support 18 — 20 Disabled' Disabled' From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE Full support 11 Full support 11 Full support 8 Alternate Name' Alternate Name' Uses the non-standard name: -ms-inline-flexbox	Opera Full support 16 Full support 16 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 9 Full support 9 Full support 6.1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 4.4 Full support 4.4 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 29 Full support 29 Full support 25 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 20 Notes' Full support 20 Notes' Notes' Firefox 28 added multi-line flexbox support. No support 18 — 20 Disabled' Disabled' From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 16 Full support 16 Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 9 Full support 9 Full support 6.1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 2.0 Full support 2.0 Full support 1.5 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-

Legend

Full support  

Full support

See implementation notes.'

See implementation notes.

User must explicitly enable this feature.'

User must explicitly enable this feature.

Uses a non-standard name.'

Uses a non-standard name.

Requires a vendor prefix or different name for use.'

Requires a vendor prefix or different name for use.

Support of inline-grid

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
inline-grid	Chrome Full support 57	Edge Full support 16 Full support 16 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Firefox Full support 52	IE Partial support 10 Prefixed' Notes' Partial support 10 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -ms- Notes' Internet Explorer implements an older version of the specification.	Opera Full support 44	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57	Firefox Android Full support 52	Opera Android Full support 43	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0 Notes' Full support 6.0 Notes' Notes' Samsung Internet added this earlier than the corresponding Chrome version would indicate.

Legend

Full support  

Full support

Partial support  

Partial support

See implementation notes.'

See implementation notes.

Requires a vendor prefix or different name for use.'

Requires a vendor prefix or different name for use.

See also

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

<display-legacy> by Mozilla Contributors is licensed under CC-BY-SA 2.5.