Understanding the CSS display Property and Its Two‑Value Syntax

This article, originally published in 奇舞周刊 by front‑end engineer Liu Bingjing, introduces the CSS display property, which controls an element’s formatting context and determines whether it behaves as a block‑level or inline element.

By changing the display value, developers can switch an element’s presentation—for example, turning an h1 from block to inline. The article also shows how modern layout techniques such as Grid and Flex are applied via display: grid and display: flex , and how display: inline‑grid or display: inline‑flex preserve inline behavior while using those layouts.

The CSS specification now allows a two‑value syntax: the first value describes the element’s external display (block, inline, etc.), and the second value describes the formatting context for its children. A table of legacy single‑value equivalents versus the new two‑value forms is presented (images omitted for brevity).

Only Firefox 70 currently implements this double‑value syntax; other browsers treat it as invalid, so using it in production is premature. Nevertheless, the two‑value form clarifies the distinction between an element’s outward appearance and its internal layout, which is useful for teaching and self‑learning.

The article also clarifies the relationship between display: inline‑block and display: flow‑root . In fact, display: inline‑block is equivalent to display: inline flow‑root , and flow‑root generates a block container box that establishes a new block formatting context.

Code example from the specification:

[flow-root]

The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.

Images in the original article illustrate the visual differences between applying flow‑root and not applying it, as well as screenshots of the double‑value syntax in Firefox 70.

In summary, while browser support is limited, the two‑value display syntax provides a clearer mental model of how CSS layouts affect both the element itself and its descendants, making it a valuable concept for developers learning CSS.

References:

https://hacks.mozilla.org/2019/10/the-two-value-syntax-of-the-css-display-property/

https://div.io/topic/1973