The All-New display Property.

Starting with Chrome 115, there are multiple values for the CSS display property. display: flex becomes display: block flex and display: block becomes display: block flow. The single values you know are now considered legacy but are kept in the Browsers for backward compatibility.

Why is it long overdue?

In short: It changes how we can explain things such as the Box Model. The specification is still a CR Snapshot, meaning that the W3C collects experiences from the implementors to finalize the standard. Therefore, some of it might still change.

The rework splits the display type into two parts: The outer display type and the inner display type.

The outer display type dictates how the principal box itself participates in flow layout.

The inner display type dictates how its descendant boxes are laid out (except for replaced elements, that’s a bit more complex).

Therefore display: flex becomes display: block flex meaning the outer display type is block (it behaves as a block element on the outside), but its child elements are rendered according to the flex layout.

This is the same behavior as before, but with this change, we are able to talk about the influence of the display property regarding child elements and surrounding elements. In my opinion, this mental model makes it easier to create more predictable layouts, and it is simpler to explain the different layout modes and their effects.

In newer courses or tutorials, a good explanation of the Box Model needs to cover not only margins, borders, paddings, width, and height but also box-sizing and the display property.

What are valid values of the display property?

As already mentioned, some old properties are now legacy. Here are all valid properties:

For the multiple-value syntax display: outer-type inner-type valid outer types are block, inline, and run-in. Valid inner display types are flow, flow-root, table, flex, grid, and ruby.

There are also valid single-values: list-item, contents, and none.

On top of that, CSS has some internal display values that remain valid. These values will be computed when using table or ruby display types.

The following combinations are now legacy: inline-block, inline-table, inline-flex, and inline-grid. They can be replaced with their multi-value equivalents, e.g.: display: inline flex.

Multi-Values are supported on recent versions of modern Browsers: https://caniuse.com/mdn-css_properties_display_multi-keyword_values

Caniuse for Multi-Keyword values of the display property.

That’s all, folks!

Thank you so much for reading!

The above is the detailed content of The All-New display Property.. For more information, please follow other related articles on the PHP Chinese website!