css - Are flex items block level element?

Question

Flex items are element of flex level, but is that an element of the block level?

---

According to Chapter 4 of CSS Flexible Box Layout Module Level 1, flex items are considered to be at the flex level and not at the block level.

A flex item establishes an independent formatting context for its contents. However, flex items themselves are flex-level boxes, not block-level boxes: they participate in their container’s flex formatting context, not in a block formatting context.

---

However, if you read chapter 4 later, it is written that the flex item's display value will be "blockified".

Does blockified indicate that the element is block level? If so, the "flex item is flex level" described above is a mistake.

The display value of a flex item is blockified: 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. (See CSS2.1§9.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)

---

What does "blockified" mean here? Also, are flex items at the flex level? Or is it a blockified block level?

If it interprets as a specification, it will be the contradictory conclusion that "flex item is flex level, not block level but it becomes block level by blockified".

Answer 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.