所以,如果我在Y元素上设置显示为X值(考虑到Y参与flex上下文,即Y是一个flex项),我可以确定我将始终获得行为的flex项(在这个格式化上下文中,在flex容器中)就像块级元素一样？
(换句话说,无论X = block / inline / table-cell / inline-grid / …等,Y都参与块格式化上下文,对吧？)
> X – 非块值
> Y – flex-item,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>
解决方法
请注意,这意味着可以将一个连续的文本行包装在一个与任何元素不对应的匿名弹性项目中,并且如果满足以下任何条件,则Flex容器的元素子级可能不是弹性项目
an absolutely-positioned child of a flex container does not participate in flex layout.
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.
The element generates no Boxes at all.
The element generates Boxes as normal,but those Boxes do not
participate in layout in any way,and must not be displayed.
>以前,如果Flex容器的子级具有生成匿名父级的显示值,则该父级将成为弹性项而不是子级.这已更改,现在子项成为弹性项,并且不生成父项.
除此之外,是的,显示值不应该阻止元素成为弹性项目.
请注意,flex项目是blockified,因此例如内联块变为块,内联表变为表格,内联变量变为柔性等.
这意味着,无论指定的outer display role如何,flex项始终是块级的.
基本上,当在柔性项目上使用时,显示属性仅用于设置其inner display layout model,例如,您希望flex项目是其内容的Flex容器.
A 07009 establishes a new formatting context for its
contents. The type of this formatting context is determined by its
070010 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.
(术语略有不同,显示规范说灵活项目在其外部显示角色的意义上是块级别,FlexBox规范说它不是块级别,因为它参与的格式化上下文不是块一)
