<display-inside>

語法

有效的 <display-inside> 值

flow

元素使用流式佈局（塊級和行內佈局）來佈局其內容。

如果其外部顯示型別是 inline，並且它參與塊級或行內格式化上下文，則它會生成一個行內框。否則，它會生成一個塊容器框。

根據其他屬性（例如 position、float 或 overflow）的值，以及它自身是否參與塊級或行內格式化上下文，它要麼為其內容建立一個新的塊格式化上下文（BFC），要麼將其內容整合到其父級格式化上下文。

flow-root

該元素生成一個塊元素框，該框建立一個新的塊格式化上下文，定義格式化根的位置。

table

這些元素的行為類似於 HTML <table> 元素。它定義了一個塊級框。

flex

該元素的行為類似於塊元素，並根據 flexbox 模型佈局其內容。

grid

該元素的行為類似於塊元素，並根據 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 Module Level 3 # typedef-display-inside

幫助改進 MDN

瞭解如何貢獻

此頁面上次由 MDN 貢獻者在 2025年7月14日修改。

在 GitHub 上檢視此頁面 • 報告此內容存在的問題

語法

正式語法

示例

HTML

CSS

結果

規範

瀏覽器相容性

css.properties.display.flow-root

css.properties.display.table

css.properties.display.flex

css.properties.display.grid

css.properties.display.ruby

另見

幫助改進 MDN