css - flex 元素的 `display` 属性的允许值是多少？ ( flex 元素的 child 的布局无关紧要)

Question

flex 容器(由display: flex 或display: inline-flex 指定)的所有子容器都是自动生成的 flex 元素。 flex 元素没有显示属性；相反，我们将其设置为其他值，具体取决于我们希望如何布置 flex 元素的子项。

所以，如果我在 Y 元素上将 display 设置为 X 值(考虑到 Y 参与了一个 flex 上下文，即 Y 是一个 flex-item)，我可以确定我总是会得到表现得像 block 级元素的 flex 元素(在这种格式化上下文中，在 flex 容器中)？

(换句话说，无论是否 X=block/inline/table-cell/inline-grid/…etc ，Y 都参与了 block 格式化上下文，对吧？)

• X – 非 block 值
• Y – flex 元素，html 元素

这个:

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

等于这个(没有任何副作用)

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

Answer 1

成为 flex item 的唯一条件正在成为 flex 容器的流入子容器。

请注意，这意味着连续的文本运行可以包装在不对应任何元素的匿名 flex 元素中，并且如果出现以下任何情况，则 flex 容器的子元素可能不是 flex 元素

• 是absolutely positioned

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

• 它有 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.

  它的子项将变成 flex 元素(除非此列表中的某些内容适用于它们)。

• 它有 display: none

  The element and its descendants generates no boxes.

• 它有 box-suppress: discard

  The element generates no boxes at all.

• 它有 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.

• 以前，如果 flex 容器的子项具有生成匿名父项的 display 值，则该父项成为 flex 项而不是子项。这发生了变化，现在子项变成了 flex 元素，并且没有生成父项。

除此之外，是的，display 值不应阻止元素成为 flex 元素。

请注意 flex 元素是 blockified , 所以例如 inline-block 变成了 block, inline-table 变成了 table, inline-flex 变成 flex 等

这意味着，无论指定 outer display role ， flex 元素将始终是 block 级的。

基本上，display 属性在 flex 元素上使用时，仅对设置其 inner display layout model 有用。 ，例如您希望 flex 元素成为其内容的 flex 容器。

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.

(术语有点不同，Display 规范说 flex 元素在其外部显示 Angular 色的意义上是 block 级的，Flexbox 规范说它不是 block 级的，因为它参与的格式化上下文不是 block )