W3cubDocs

/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

Browser compatibilityUpdate compatibility data on GitHubUpdate compatibility data on GitHubUpdate compatibility data on GitHubUpdate compatibility data on GitHub

Support of inline-block

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

Support of inline-table

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

Support of inline-flex

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
inline-flex 29
29
21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12 20
20
Firefox 28 added multi-line flexbox 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.
11
11
8
Uses the non-standard name: -ms-inline-flexbox
16
16
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9
9
6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
inline-flex 4.4
4.4
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
29
29
25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
20
20
Firefox 28 added multi-line flexbox 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.
16
16
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9
9
6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
2.0
2.0
1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

Legend

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.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Support of inline-grid

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

Legend

Full 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

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/display-legacy