flex-item的`display`属性的允许值是什么？ （flex-item的孩子的布局是不相关的） [英] What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)

问题描述

Flex容器的所有子项（由 display：flex 或 display：inline-flex 指定）弹性物品。 Flex项目没有显示属性;相反，我们将其设置为一些其他值，具体取决于我们希望如何布置flex项目的子项。

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

因此，如果我将显示为为Y元素上的X值（考虑到Y参与flex上下文，也就是Y是一个flex项目）我可以确保我总是获得flex-item行为（在这种格式化上下文，在flex容器）像块级元素？

So, if I set display to X value on Y element (taking into account that the Y participates in a flex context, that is Y is a flex-item) can I be sure that I will always get the flex-item that behaves (in this formatting context, in the flex container) like a block-level element?

（换句话说，Y参与块格式化上下文，而不管X = block / inline / table-cell / inline-grid / ）

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

• X - 非阻止值


• Y - flex-item，html元素
• 
  

• X – non-block value
• Y – flex-item, html element

这：

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

等于此（没有任何副作用）

equals to this (without any side effects)

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

推荐答案

作为 flex项目是flex容器的流内子项。

The only condition for being a flex item is being an in-flow child of a flex container.

注意这意味着一个连续的文本可以包装在一个不对应任何元素的匿名flex项目中，flex容器的元素子元素可能不是一个flex项目如果出现以下任何情况

Note this means a contiguous run of text can be wrapped inside an anonymous flex item which do not correspond to any element, and an element child of a flex container might not be a flex item if any of the following

• 这是绝对定位

Flex容器不参与flex布局。

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项目（除非此列表中的某些内容适用于它们）。

Its children will become the flex items instead (unless something from this list applies to them).

它有 显示：无

It has 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容器的子项有显示值生成一个匿名父，该父成为flex项而不是子项。

Previously, if a child of a flex container had a display value that generated an anonymous parent, that parent became the flex item instead of the child. This changed and now the child becomes the flex item, and no parent is generated.

除此之外，是的， display 值不应阻止元素成为弹性项目。

Apart from that, yes, the display value should not prevent an element from being a flex item.

请注意flex项目 blockified ，因此例如 inline-block code>变成表， inline-table c>， inline-flex 变为 flex 等。

Be aware that flex items are blockified, so for example inline-block becomes block, inline-table becomes table, inline-flex becomes flex, etc.

这意味着，无论指定的外部显示角色

This means that, whatever the specified outer display role, the flex item will always be block-level.

基本上，当在flex上使用时， display 属性项目，只有设置其内部显示布局模型才有用，例如您希望flex项目是其内容的flex容器。

Basically, the display property, when used on a flex item, is only useful to set its inner display layout model, e.g. that you want the flex item to be a flex container for its contents.

A flex item 为其
内容建立新的格式化上下文。此格式化上下文的类型由其
display 值，照常。但是，flex项本身是
flex-level 框，而不是块级框：它们参与其容器的flex格式化上下文，而不是以块格式化
上下文。 p>

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.

（术语不同，显示规范说flex项目是块级别的外部显示角色，Flexbox spec说它不是块级的，它参与的格式化上下文不是一个块）

(The terminology differs a bit, the Display spec says a flex item is block-level in the sense of its outer display role, the Flexbox spec says it's not block-level in the sense that the formatting context in which it participates is not a block one)

这篇关于flex-item的`display`属性的允许值是什么？ （flex-item的孩子的布局是不相关的）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！