<display-inside>
================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
以下のキーワードは、要素の内部の `display` 種別を指定し、これは要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。これらのキーワードは `display` プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では `<display-outside>` のキーワードと共に使用されます。

構文
--

有効な `<display-inside>` の値は以下の通りです。

`flow` 
Experimental

要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。

外部表示種別が `inline` または `run-in` であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。

ほかのプロパティ (`position`, `float`, `overflow` など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たなブロック整形コンテキスト (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。

`flow-root`

要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。

`table`

HTML の `<table>` 要素と同じように動作します。これは、ブロックレベルボックスを定義します。

`flex`

要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。

`grid`

要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。

`ruby` 
Experimental

要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の `<ruby>` 要素のように動作します。


**メモ:** 二つの値の構文に対応しているブラウザーは、 `display: flex` や `display: grid` などの内部表示種別のみが指定されていると、外部表示種別を `block` に設定します。これで期待通りに動作します。例えば、ある要素を `display: grid` に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。

例
-

この例では、親ボックスは `display: flow-root` となり、新しいブロック整形コンテキストを確立して浮動アイテムを含みます。

### 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;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-inside |

ブラウザーの互換性
---------

### 複数のキーワードの対応

### css.properties.display.multi-keyword\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flow-root

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.table\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.grid

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flex

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.ruby\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

* Chromium のバグ: https://bugs.chromium.org/p/chromium/issues/detail?id=804600
### flow-root の対応

### css.properties.display.multi-keyword\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flow-root

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.table\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.grid

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flex

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.ruby\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### table の対応

### css.properties.display.multi-keyword\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flow-root

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.table\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.grid

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flex

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.ruby\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### grid の対応

### css.properties.display.multi-keyword\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flow-root

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.table\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.grid

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flex

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.ruby\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### flex の対応

### css.properties.display.multi-keyword\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flow-root

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.table\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.grid

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flex

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.ruby\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### ruby の対応

### css.properties.display.multi-keyword\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flow-root

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.table\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.grid

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flex

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.ruby\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `display`
    + `<display-outside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* フレックスボックスの基本概念
* グリッドレイアウトの基本概念