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.