New: two values for the CSS display property
Recently, the CSS display property started accepting two values. The first is the display-outside value which is followed by the display-inside value. This change was released with Firefox 70 in Oct 2019 according to the release notes.
The display-outside value represents the elements role in flow layout. Standard valid values are block and inline. Block means line breaks are created before and after the element. Inline means no line breaks are made. There is an experimental value, run-in, which basically chooses block or inline depending on the surrounding elements.
The display-inline value indicates how content within the element should be displayed. For example: table, flex, and grid. The values flow, flow-root, and ruby are also valid here but perhaps not as familiar. The flow value is experimental means a block generated unless the display-outside value is inline or run-in, in which case an inline box is used.
Overall, I believe the change to a display property which sets both inside and outside display behaviour will be more flexible and makes more sense.
.flex-inline {
display: inline-flex;
}Becomes:
.flex-inline {
display: inline flex;
}A similar paradigm shift occurs for inline-table and inline-grid.
To me, that is more pleasing to the eye. Now that I see it, inline-flex was actually doing two separate jobs – 1. setting the outside display value to inline and 2. settings the inside display value to flex – setting these values separately is a cleaner solution. This is a good development for the CSS display property.
The MDN Docs on the display property do a good job covering the topic in detail.