No Login Data Private Local Save

Two‑Value Display Syntax Playground - Online Outer & Inner

20
0
0
0

Two‑Value Display Syntax Playground

Explore the CSS display property with separate outer & inner values

Configure Display
Determines box’s outer role in flow layout.
Defines inner formatting context.
block flowblock

Default block-level box.

Live Preview

Outer context shows block vs inline positioning. Inner items follow the chosen formatting context.

Before
1
2
3
After
display: block flow; /* equivalent to display: block; */
Frequently Asked Questions

CSS Display Module Level 3 introduces a two‑value syntax where display accepts an outer type (e.g., block or inline) and an inner type (e.g., flow, flex, grid). This permits explicit control over both the element’s role in the page flow and its internal formatting context.

Yes, all major modern browsers (Chrome, Edge, Firefox, Safari) support the two‑value syntax. You can safely use display: block flex or display: inline grid today. Older browsers fall back to the legacy single‑value behavior if the value is unrecognised, but the syntax itself degrades gracefully.

The two‑value form makes the intent explicit. For example, display: block flow-root clearly states you want a block‑level BFC, whereas the single‑value flow-root hides the outer role. It also opens the door to future combinations not covered by the legacy keywords.

inline-flex is exactly display: inline flex and inline-grid is display: inline grid. They become two‑value shorthands. The same applies to inline-table (= inline table) and inline ruby.

Yes, display: inline flow is equivalent to display: inline. It creates an inline box whose children participate in normal flow.

flow-root establishes a new block formatting context (BFC). It is often used to contain floats without the need for a clearfix. Combined with block it gives display: flow-root.

In the specification, list-item can be added as an additional keyword, and run-in is defined for the outer role, but browser support for run-in is extremely limited. Stick to the common combinations for production.
🔧 Related Tools