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.
display-outside value represents the elements role in flow layout. Standard valid values are
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.
display-inline value indicates how content within the element should be displayed. For example:
grid. The values
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.
display: inline flex;
A similar paradigm shift occurs for
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.