11---
22title : <display-inside>
33slug : Web/CSS/display-inside
4+ l10n :
5+ sourceCommit : 8d4fb1e2934111a13989d2796152dc601468e7b5
46---
57
68{{CSSRef}}
@@ -11,28 +13,32 @@ slug: Web/CSS/display-inside
1113
1214有効な ` <display-inside> ` の値は以下の通りです。
1315
14- - ` flow ` {{Experimental_Inline}}
16+ - ` flow `
1517
1618 - : 要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。
1719
1820 外部表示種別が ` inline ` または ` run-in ` であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。
1921
20- ほかのプロパティ ({{cssxref ("position")}}, {{cssxref ("float")}}, {{cssxref ("overflow")}} など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たな[ ブロック整形コンテキスト] ( /ja/docs/Web/Guide/ CSS/Block_formatting_context ) (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。
22+ ほかのプロパティ ({{CSSxRef ("position")}}, {{CSSxRef ("float")}}, {{CSSxRef ("overflow")}} など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たな[ ブロック整形コンテキスト] ( /ja/docs/Web/CSS/CSS_display /Block_formatting_context ) (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。
2123
2224- ` flow-root `
23- - : 要素は、新たな[ ブロック整形コンテキスト] ( /ja/docs/Web/Guide/ CSS/Block_formatting_context ) を確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
25+ - : 要素は、新たな[ ブロック整形コンテキスト] ( /ja/docs/Web/CSS/CSS_display /Block_formatting_context ) を確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
2426- ` table `
2527 - : HTML の {{HTMLElement("table")}} 要素と同じように動作します。これは、ブロックレベルボックスを定義します。
2628- ` flex `
27- - : 要素は、ブロック要素のように動作しつつ、そのコンテンツを[ フレックスボックスモデル] ( /ja/docs/Web/CSS/CSS_Flexible_Box_Layout ) に従ってレイアウトします。
29+ - : 要素は、ブロック要素のように動作しつつ、そのコンテンツを[ フレックスボックスモデル] ( /ja/docs/Web/CSS/CSS_flexible_box_layout ) に従ってレイアウトします。
2830- ` grid `
2931 - : 要素は、ブロック要素のように動作しつつ、そのコンテンツを[ グリッドモデル] ( /ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout ) に従ってレイアウトします。
30- - ` ruby ` {{Experimental_Inline}}
32+ - ` ruby `
3133 - : 要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の {{HTMLElement("ruby")}} 要素のように動作します。
3234
33- > ** メモ:** 二つの値の構文に対応しているブラウザーは 、 ` display: flex ` や ` display: grid ` などの内部表示種別のみが指定されていると、外部表示種別を ` block ` に設定します。これで期待通りに動作します。例えば、ある要素を ` display: grid ` に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。
35+ > ** メモ:** 2 つの値の構文に対応しているブラウザーは 、 ` display: flex ` や ` display: grid ` などの内部表示種別のみが指定されていると、外部表示種別を ` block ` に設定します。これで期待通りに動作します。例えば、ある要素を ` display: grid ` に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。
3436
35- <h2 id =" Examples " >例</h2 >
37+ ## 形式文法
38+
39+ {{csssyntax}}
40+
41+ ## 例
3642
3743この例では、親ボックスは ` display: flow-root ` となり、新しいブロック整形コンテキストを確立して浮動アイテムを含みます。
3844
@@ -74,30 +80,6 @@ slug: Web/CSS/display-inside
7480
7581## ブラウザーの互換性
7682
77- ### 複数のキーワードの対応
78-
79- {{Compat}}
80-
81- - Chromium のバグ: < https://bugs.chromium.org/p/chromium/issues/detail?id=804600 >
82-
83- ### flow-root の対応
84-
85- {{Compat}}
86-
87- ### table の対応
88-
89- {{Compat}}
90-
91- ### grid の対応
92-
93- {{Compat}}
94-
95- ### flex の対応
96-
97- {{Compat}}
98-
99- ### ruby の対応
100-
10183{{Compat}}
10284
10385## 関連情報
0 commit comments