What are the acceptable values ​​of the `display` property for a flex item? (mock children with flexible objects does not matter)

Question

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

So, if I set the display value to X in the Y element (given that Y is involved in a flexible context, that is, Y is a flexible element), can I be sure that I will always get a flex -item that behaves (in this formatting context in the flex container), how is the block level element?

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

• X - non-locked value
• Y - flex-item element, html

It:

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

equal 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 the existence of a flexible element is a child stream of the flexible container.

Please note: this means that a continuous run of text can be wrapped inside an anonymous flex element that does not match any element, and a child of the flex container may not be a flex element if any of the following

• absolutely positioned

  An absolutely positioned child of a flexible container is not involved in a flexible layout.

• It has display: contents

  The element itself does not generate any fields, but its children and Pseudo-elements still generate boxes as usual. For the purposes of generating and arranging boxes, an item should be processed as if it were replaced by its children and pseudo-elements in a document tree.

  Instead, his children will become elements of flexibility (unless something from this list applies to them).

• It has display: none

  An element and its descendants do not generate any fields.

• It has box-suppress: discard

  The element does not generate any fields.

• It has box-suppress: hide

  The element generates fields as usual, but these fields do not participate in the layout in any way and should not be displayed.

• Previously, if a child of a flex container had a display value that generated an anonymous parent, that parent became a flex element, not a child. This has changed, and now the child becomes an element of flexibility, and the parent is not created.

Also, yes, the display value should not prevent the element from being a flexible element.

Remember that flex elements are locked , so for example, inline-block becomes block , inline-table becomes table , inline-flex becomes flex , etc.

This means that regardless of the specified external role, the flexibility element will always be blocky.

In principle, the display property, when used in a flex element, is only useful for setting its internal display structure , for example. that you want the flex element to be a flex container for its contents.

A flex item sets a new formatting format for its content. The type of this formatting is determined by its display value, as usual. However, the flexible elements of flex-level boxes themselves are not block blocks: they are involved in container formatting contexts, and not in block formatting contexts.

(The terminology is slightly different, the Display specification indicates that the flex element is a block level in the sense of its external display role, the Flexbox specification says that it is not a block level in the sense that the formatting context in which it participates is not block)