css - What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)

Question

All children of a flex container (designated by display: flex or display: inline-flex) are automatically made flex items. There is no display property for a flex item; instead, we set it to some other value depending on how we want the children of the flex item to be laid out.

So, if I set display to X value on Y element (taking into account that the Y participates in a flex context, that is Y is a flex-item) can I be sure that I will always get the flex-item that behaves (in this formatting context, in the flex container) like a block-level element?

(In other words, the Y participates in a block formatting context regardless of whether X=block/inline/table-cell/inline-grid/…etc , right?)

• X – non-block value
• Y – flex-item, html element

This:

<div id="flex-container" style="display:flex">
    <div id="flex-item" style="display: inline;">item</div>
</div>

equals to this (without any side effects)

<div id="flex-container" style="display:flex">
    <div id="flex-item" style="display: block;">item</div>
</div>

Answer 1

The only condition for being a flex item is being an in-flow child of a flex container.

Note this means a contiguous run of text can be wrapped inside an anonymous flex item which do not correspond to any element, and an element child of a flex container might not be a flex item if any of the following

• It is absolutely positioned

  an absolutely-positioned child of a flex container does not participate in flex layout.

• It has display: contents

  The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.

  Its children will become the flex items instead (unless something from this list applies to them).

• It has display: none

  The element and its descendants generates no boxes.

• It has box-suppress: discard

  The element generates no boxes at all.

• It has box-suppress: hide

  The element generates boxes as normal, but those boxes do not participate in layout in any way, and must not be displayed.

• Previously, if a child of a flex container had a display value that generated an anonymous parent, that parent became the flex item instead of the child. This changed and now the child becomes the flex item, and no parent is generated.

Apart from that, yes, the display value should not prevent an element from being a flex item.

Be aware that flex items are blockified, so for example inline-block becomes block, inline-table becomes table, inline-flex becomes flex, etc.

This means that, whatever the specified outer display role, the flex item will always be block-level.

Basically, the display property, when used on a flex item, is only useful to set its inner display layout model, e.g. that you want the flex item to be a flex container for its contents.

A flex item establishes a new formatting context for its contents. The type of this formatting context is determined by its display value, as usual. 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.

(The terminology differs a bit, the Display spec says a flex item is block-level in the sense of its outer display role, the Flexbox spec says it's not block-level in the sense that the formatting context in which it participates is not a block one)