Two-value display property
The display CSS property accepts multiple keyword values, such as inline flex or block flow, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.
Overview
The display CSS property accepts multiple keyword values, such as inline flex or block flow, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.display.multi-keyword_values | 115 | 115 | 70 | 15 | 115 | 15 |
Syntax
/* Traditional syntax */
.container { display: flex; }
.inline-container { display: inline-flex; }
/* Binary syntax (equivalent) */
.container { display: block flex; }
.inline-container { display: inline flex; }
/* Same for Grid */
.grid { display: block grid; }
.inline-grid { display: inline grid; }Live demo
block flex（= display: flex）
Two-value display syntax Block flex(= display: flex) demo.
block grid（= display: grid）
Two-value display syntax Block grid(= display: grid) demo.
Use cases
Using Two-value display property
The display CSS property accepts multiple keyword values, such as inline flex or block flow, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features