Are flex items block level element?
Solution 1:
Both specifications are, of course, correct, but you forget the keyword display in the second section. Each element has a display value and for flex items this value is block
which means that if, for example, you specify inline-block
it will get computed to block
. If you specify inline-grid
, it will get computed to grid
and so on.
if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent
So flex items are flex-level boxes with a display: block;
value but they aren't block-level boxes.
Related: Usage of display property of flex box items
To make it easier, imagine you have two worlds, the outside world and the inside world. If we look at a flex item from the outside world, it's a flex-level box participating in its container's flex formatting context. From the inside world, it's a block element which means that an element inside a flex item will see the flex item as a block element.
If you set inline-[flex/table/grid/block]
to the flex item it will be seen as a [flex/table/grid/block]
container from the inside. The inline
is gone because it's blockified.