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
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.
Syntax not found in DB!
Example
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;
} Support of inline-block
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
| Basic support |
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 |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
| Basic support |
Yes |
Yes |
12 |
4 |
Yes |
Yes |
Yes |
Support of inline-table
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
| Basic support |
1 |
12 |
3 |
8 |
7 |
1 |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
| Basic support |
Yes |
Yes |
12 |
4 |
Yes |
Yes |
Yes |
Support of inline-flex
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
| Basic support |
29
- 29
- 21
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
12 |
20
- 20
- Firefox 28 added multi-line flexbox support.
- 18 — ?
Disabled
- Disabled From version 18: 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 Requires the vendor prefix: -webkit-
|
9
- 9
- 6.1
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
| Basic support |
4.4
- 4.4
- Yes
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
29
- 29
- 25
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
12 |
20
- 20
- Firefox 28 added multi-line flexbox support.
- 18 — ?
Disabled
- Disabled From version 18: 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 Requires the vendor prefix: -webkit-
|
9
- 9
- 6.1
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
Yes |
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 |
| Basic support
|
57 |
16
- 16
- 12
Prefixed
- Prefixed Requires the vendor prefix: -ms-
|
52 |
10 Prefixed
- 10
Prefixed
- Prefixed Requires the vendor prefix: -ms-
- Internet Explorer implements an older version of the specification.
|
44 |
? |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
| Basic support
|
57 |
57 |
16
- 16
- 12
Prefixed
- Prefixed Requires the vendor prefix: -ms-
|
52 |
44 |
? |
7.0 |
Legend
- Full support
- Partial support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- 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