W3cubDocs

/CSS

CSS Display

CSS Display is a module of CSS that defines how the CSS formatting box tree is generated from the document element tree and defines properties controlling it.

Reference

CSS properties

CSS data types

Guides

CSS Flow Layout (display: block, display: inline)

display: flex

display: grid

Specifications

Specification Status Comment
CSS Display Module Level 3
The definition of 'display' in that specification.		 Working Draft Added run-in, flow, flow-root, contents and multi-keyword values.
CSS Level 2 (Revision 1)
The definition of 'display' in that specification.		 Recommendation Added the table model values and inline-block.
CSS Level 1
The definition of 'display' in that specification.		 Recommendation Initial definition. Basic values: none, block, inline and list-item.

In addition to the CSS Display Specification Level 3, further specifications define the behavior of various values of display.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 12 1 4 7 1
Multi-keyword values ? ? No No ? ?
list-item 1 12 1 6 7 1
inline-block 1 12 1 8
8
6
Until Internet Explorer 8, inline-block is only for natural inline elements.
 7 1
inline-table 1 12 3 8 7 1
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group 1 12 1 8 7 1
flex 29
29
21
Prefixed
Prefixed Requires the vendor prefix: -webkit-
 12 20
20
Firefox 28 added multi-line flexbox support.
18 — 28
Disabled
Disabled From version 18 until version 28 (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-flexbox
16
16
15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
12.1 — 15
9
9
6.1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
inline-flex 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-
grid 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 Yes
inline-grid 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 ?
subgrid No No No No No No
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container ? 12 38
38
34 — 38
Disabled
Disabled From version 34 until version 38 (exclusive): this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 ? ? ?
run-in 1 — 32
1 — 32
Before Chrome 4, run-in was not supported before inline elements.
 No No 8 7 — 15 1 — 8
1 — 8
Before Safari 5, run-in was not supported before inline elements.
flow-root 58 ? 53 ? 45 ?
contents 65
65
58 — 65
Disabled
Disabled From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
 No 37
37
36 — 53
Disabled
Disabled From version 36 until version 53 (exclusive): this feature is behind the layout.css.display-contents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 No 52 11.1
contents: Specific behavior of unusual elements when display: contents is applied to them ? No 59 No No No
-moz-box and -moz-inline-box No No Yes
Yes
Scheduled for removal (See bug 879275).
 No No No
-moz-grid, -moz-inline-grid, -moz-grid-group and -moz-grid-line No No ? — 62 No No No
-moz-stack and -moz-inline-stack No No ? — 62 No No No
-moz-deck No No ? — 62 No No No
-moz-popup No No ? — 62 No No No
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
Multi-keyword values ? ? ? No ? ? ?
list-item Yes Yes 12 4 Yes Yes Yes
inline-block Yes Yes 12 4 Yes Yes Yes
inline-table Yes Yes 12 4 Yes Yes Yes
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group Yes Yes 12 4 Yes Yes Yes
flex 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 — 28
Disabled
Disabled From version 18 until version 28 (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 Requires the vendor prefix: -webkit-
12.1 — 14
9
9
7.1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
 Yes
inline-flex 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
grid 57 57 16
16
12
Prefixed
Prefixed Requires the vendor prefix: -ms-
 52 44 Yes 7.0
inline-grid 57 57 16
16
12
Prefixed
Prefixed Requires the vendor prefix: -ms-
 52 44 ? 7.0
subgrid No No No No No No No
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container ? ? 12 38
38
34 — 38
Disabled
Disabled From version 34 until version 38 (exclusive): this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
 ? ? ?
run-in ? — 4.4.3
? — 4.4.3
Before version 4, run-in was not supported before inline elements.
 ? — 32
? — 32
Before Chrome 4, run-in was not supported before inline elements.
 No No ? ? — 8
? — 8
Before Safari 5, run-in was not supported before inline elements.
 ?
flow-root 58 58 ? 53 45 ? 7.0
contents 65 65 No 57 52 11.1 No
contents: Specific behavior of unusual elements when display: contents is applied to them ? ? No 59 No No ?
-moz-box and -moz-inline-box No No No Yes
Yes
Scheduled for removal (See bug 879275).
 No No No
-moz-grid, -moz-inline-grid, -moz-grid-group and -moz-grid-line No No No ? — 62 No No No
-moz-stack and -moz-inline-stack No No No ? — 62 No No No
-moz-deck No No No ? — 62 No No No
-moz-popup No No No ? — 62 No No No

Edit this page on MDN

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