1. 首页
  2. 问题
  3. 弹性项目的display属性的允许值是什么？（flex-item的子项的布局无关紧要）
一尘不染

弹性项目的display属性的允许值是什么？（flex-item的子项的布局无关紧要）

css

flex容器的所有子代（由display: flex或指定display: inline- flex）都是自动生成的flex项目。弹性项目没有显示属性。取而代之的是，根据我们希望flex子项的布局方式，将其设置为其他值。

因此，如果我display在Y元素上设置X值（考虑到Y参与了flex上下文，即Y是一个flex-item），我可以确定我将始终获得表现出作用的flex-
item（在这种格式化上下文（在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>

阅读 340

收藏
2020-05-16

共1个答案

一尘不染

成为弹性商品的唯一条件是弹性容器的流入子代。

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

  • 这是绝对定位

flex容器的绝对定位的子级不参与flex布局。

  • 它有 display: contents

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

它的子项将变为弹性项（除非此列表中的某些内容适用于它们）。

  • 它有 display: none

元素及其后代不生成任何框。

  • 它有 box-suppress: discard

该元素根本不生成任何框。

  • 它有 box-suppress: hide

元素会正常生成框，但是这些框不会以任何方式参与布局，并且不得显示。

  • 以前，如果flex容器的子项具有display生成匿名父项的值，则该父项将成为flex项而不是子项。这已更改，现在子级成为弹性项，并且没有父级生成。

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

请注意，弹性项目已被阻塞]，因此例如inline- block变为block，inline-table变为table，inline-flex变为flex等等。

这意味着，无论指定了什么外部显示角色，弹性项目都将始终处于块级。

基本上，该display属性在弹性项目上使用时，仅可用于设置其内部显示布局模型，例如，您希望将弹性项目作为其内容的弹性容器。

一个柔性的项目确立了其内容的新的格式化的内容。格式化上下文的类型display通常由其值确定 。但是，弹性项目本身是 _弹性级别的_框，而不是块级的框：它们参与其容器的flex格式上下文，而不是块格式上下文。

（术语有所不同，Display规范表示从外部显示角色的角度来看，flex项是块级别的，Flexbox规范表示从其参与的格式化上下文不是一）

2020-05-16