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 项的子项如何布局.

因此，如果我在 Y 元素上将 display 设置为 X 值(考虑到 Y 参与了 flex 上下文，即 Y 是一个 flex-item)，我可以确定我将始终获得行为(在此格式化上下文中，在 flex 容器中)像块级元素一样的 flex 项?

(换句话说，无论 X=block/inline/table-cell/inline-grid/...etc 是否为块格式上下文，Y 都参与到块格式化上下文中，对吗?)

• X – 非块值
• Y – flex-item, html 元素

这个:

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

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

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

解决方案

成为 flex item 是 flex 容器的 in-flow 子项.

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

• 它是绝对定位<块引用>

  flex 容器的绝对定位子节点不参与 flex 布局.

• 它有 display: contents

  <块引用>

  元素本身不生成任何框，但它的子元素和伪元素仍然照常生成框.出于以下目的框生成和布局，元素必须被视为被替换为文档中的子元素和伪元素树.

  它的子项将成为弹性项目(除非此列表中的某些内容适用于它们).

• 它有 display: none

  <块引用>

  元素及其后代不生成框.

• 它有框-suppress: 丢弃

  <块引用>

  该元素根本不生成框.

• 它有框-抑制:隐藏

  <块引用>

  元素正常生成框，但那些框不以任何方式参与布局，不得展示.

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

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

请注意弹性项目是blockified，例如inline-block 变成 block，inline-table 变成 table，inline-flex变成 flex 等

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

基本上，display 属性在用于 flex 项目时，仅用于设置其 内部显示布局模型，例如您希望弹性项目成为其内容的弹性容器.

<块引用>

flex item 为它的内容.此格式化上下文的类型由其决定display 值，像往常一样.然而，弹性项目本身是flex-level 框，而不是块级框:它们参与容器的 flex 格式上下文，而不是块格式上下文.

(术语有点不同，Display 规范说一个 flex item 就其外部显示角色而言是块级的，Flexbox 规范说它不是块级的，因为它参与的格式化上下文不是块一个)

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.

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?

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

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

This:

<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>

解决方案

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

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

• It is absolutely positioned

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

• It has 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.

  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.

• It has box-suppress: discard

  The element generates no boxes at all.

• It has 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.

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

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

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.

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 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.

(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屋！