flex项目的`display`属性的允许值是多少？(flex-item的子项布局无关紧要)

Question

Flex容器的所有子容器(由display: flex或指定display: inline-flex)自动生成弹性项目.Flex项目没有显示属性; 相反,我们将其设置为其他值,具体取决于我们希望如何布置Flex项目的子项.

所以,如果我display在Y元素上设置X值(考虑到Y参与flex上下文,即Y是一个flex项),我可以确定我将始终获得行为的flex项(在这个格式化上下文,在flex容器中)就像一个块级元素？

(换句话说,无论X = block/inline/table-cell/inline-grid/...等,Y都参与块格式化上下文,对吧？)

这个:

<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项的唯一条件是flex容器的in-flow子.

请注意,这意味着可以将一个连续的文本行包装在一个匿名的flex项目中,该项目不对应于任何元素,并且如果满足以下任何条件,Flex容器的元素子项可能不是flex项目

它绝对定位

Flex容器的绝对定位子元素不参与flex布局.
它有 display: contents

元素本身不会生成任何框,但其子元素和伪元素仍然会正常生成框.出于框生成和布局的目的,必须将元素视为已在文档树中替换为其子元素和伪元素.

它的子项将成为flex项目(除非此列表中的某些内容适用于它们).
它有 display: none

元素及其后代不会生成任何框.
它有 box-suppress: discard

该元素根本不生成任何框.
它有 box-suppress: hide

该元素正常生成框,但这些框不以任何方式参与布局,并且不得显示.
以前,如果Flex容器的子级具有display生成匿名父级的值,则该父级将成为弹性项而不是子级.这已更改,现在子项成为弹性项,并且不生成父项.

除此之外,是的,该display值不应该阻止元素成为flex项.

请注意,弹性项目会被阻塞,因此例如inline-block变为block,inline-table变为table,inline-flex变为flex等.

这意味着,无论指定的外部显示角色如何,弹性项目将始终是块级别.

基本上,display当在flex项上使用时,该属性仅用于设置其内部显示布局模型,例如,您希望flex项是其内容的Flex容器.

一个柔性的项目确立了其内容的新的格式化的内容.display与往常一样,此格式化上下文的类型由其值确定 .但是,flex项本身是 flex级别的框,而不是块级框:它们参与其容器的flex格式化上下文,而不是块格式化上下文.

(术语略有不同,显示规范说灵活项目在其外部显示角色的意义上是块级别,Flexbox规范说它不是块级别,因为它参与的格式化上下文不是块一)