<display-inside>

这些关键字指定元素的内部 display 类型，该类型定义了用于布局其内容的格式化上下文类型（假设它是非替换元素）。这些关键字用作 display 属性的值，并且可以出于传统目的用作单个关键字，或者如 Level 3 规范中所定义的那样与来自 <display-outside> 关键字的值一起使用。

语法

有效的 <display-inside> 值

flow

元素使用流布局（块级和内联布局）来布局其内容。

如果其外部显示类型为 inline，并且它参与块级或内联格式化上下文，则它会生成一个内联框。否则，它会生成一个块级容器框。

根据其他属性（如 position、float 或 overflow）的值以及它本身是否参与块级或内联格式化上下文，它要么为其内容建立一个新的 块级格式化上下文 (BFC)，要么将其内容集成到其父格式化上下文中。

flow-root

元素生成一个块级元素框，该框建立一个新的 块级格式化上下文，定义格式化根所在的位置。

table

这些元素的行为类似于 HTML <table> 元素。它定义了一个块级框。

flex

该元素的行为类似于块级元素，并根据 Flexbox 模型 布局其内容。

grid

该元素的行为类似于块级元素，并根据 网格模型 布局其内容。

ruby

该元素的行为类似于内联元素，并根据 ruby 格式化模型布局其内容。它与相应的 HTML <ruby> 元素的行为类似。

注意：支持双值语法的浏览器，当仅找到内部值时（例如，指定了display: flex或display: grid），会将其外部值设置为block。这将导致预期行为；例如，如果您指定某个元素为display: grid，则您会期望在网格容器上创建的框为块级框。

正式语法

<display-inside> = 
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby

示例

在此示例中，父级框已指定display: flow-root，因此建立了一个新的BFC并包含浮动项目。

HTML

html
<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>

CSS

css
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
  display: flow-root;
}

.float {
  float: left;
  width: 200px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

结果

规范

规范
CSS Display模块级别3
# typedef-display-inside

浏览器兼容性

css.properties.display.flow-root

BCD 表格仅在浏览器中加载

css.properties.display.table

BCD 表格仅在浏览器中加载

css.properties.display.flex

BCD 表格仅在浏览器中加载

css.properties.display.grid

BCD 表格仅在浏览器中加载

css.properties.display.ruby

BCD 表格仅在浏览器中加载

另请参阅