弹性容器的所有子容器（由display: flex or display: inline-flex）是自动制作的弹性项目。 Flex 项目没有显示属性；相反，我们将其设置为其他值，具体取决于我们希望弹性项目的子项如何布局。
所以，如果我设置displayY 元素上的 X 值（考虑到 Y 参与弹性上下文，即 Y 是弹性项目）我可以确定我将始终获得行为的弹性项目（在此格式化上下文中，在Flex 容器）就像块级元素一样？
（换句话说，无论 X=block/inline/table-cell/inline-grid/...etc 是否存在，Y 都会参与块格式化上下文，对吧？）
This:
<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>
成为一名的唯一条件弹性项目 https://www.w3.org/TR/css-flexbox-1/#flex-items是弹性容器的流入子容器。
请注意，这意味着连续的文本可以包装在不对应于任何元素的匿名 Flex 项目内，并且如果满足以下任一条件，则 Flex 容器的元素子元素可能不是 Flex 项目
-
It is 绝对定位 https://www.w3.org/TR/css-flexbox-1/#abspos-items
Flex 容器的绝对定位子级不参与 Flex 布局。
-
It has display: contents https://www.w3.org/TR/css-display-3/#valdef-display-contents
该元素本身不生成任何框，但它的子元素和
伪元素仍然照常生成盒子。出于以下目的
框生成和布局，该元素必须被视为已经存在
被文档中的子元素和伪元素替换
树。
它的子项将成为弹性项目（除非此列表中的某些内容适用于它们）。
-
It has display: none https://www.w3.org/TR/css-display-3/#valdef-display-none
该元素及其后代不生成框。
-
It has box-suppress: discard https://www.w3.org/TR/css-display-3/#valdef-box-suppress-discard
该元素根本不生成框。
-
It has box-suppress: hide https://www.w3.org/TR/css-display-3/#valdef-box-suppress-hide
该元素正常生成框，但这些框不会
以任何方式参与布局，并且不得显示。
以前，如果弹性容器的子容器有display生成匿名父项的值，该父项成为弹性项目而不是子项。这发生了变化，现在子项变成了弹性项目，并且没有生成父项。
除此之外，是的，displayvalue 不应阻止元素成为弹性项目。
请注意，弹性项目是块化的 https://www.w3.org/TR/css-display-3/#blockify，例如inline-block变成block, inline-table变成table, inline-flex变成flex, etc.
这意味着，无论指定什么外显角色 https://www.w3.org/TR/css-display-3/#outer-role，弹性项目将始终是块级的。
基本上，display属性，当在弹性项目上使用时，仅用于设置其内部显示布局模型 https://www.w3.org/TR/css-display-3/#inner-model，例如您希望 Flex 项目成为其内容的 Flex 容器。
A 弹性项目 https://www.w3.org/TR/css-flexbox-1/#flex-item为其建立一个新的格式化上下文
内容。此格式化上下文的类型由其确定display https://www.w3.org/TR/CSS21/visuren.html#propdef-display值，像往常一样。然而，弹性项目本身是弹性级别框，而不是块级框：它们参与容器的 Flex 格式化上下文，而不是块格式化
语境。
（术语有点不同，显示规范说 Flex 项目在其外部显示角色的意义上是块级的，Flexbox 规范说它不是块级的，因为它参与的格式化上下文不是一个块一）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
