<display-inside>
以下のキーワードは、要素の内部の display
種別を指定し、これは要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。これらのキーワードは display
プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では <display-outside>
のキーワードと共に使用されます。
構文
有効な <display-inside>
の値は以下の通りです。
flow
-
要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。
外部表示種別が
inline
またはrun-in
であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。ほかのプロパティ (
position
,float
,overflow
など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たなブロック整形コンテキスト (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。 flow-root
-
要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
table
-
HTML の
<table>
要素と同じように動作します。これは、ブロックレベルボックスを定義します。 flex
-
要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
grid
-
要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
ruby
-
要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の
<ruby>
要素のように動作します。
メモ:
2 つの値の構文に対応しているブラウザーは、 display: flex
や display: grid
などの内部表示種別のみが指定されていると、外部表示種別を block
に設定します。これで期待通りに動作します。例えば、ある要素を display: grid
に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。
形式文法
例
この例では、親ボックスは display: flow-root
となり、新しいブロック整形コンテキストを確立して浮動アイテムを含みます。
HTML
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
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.flow-root
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flow-root |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.table
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
table |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.flex
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
css.properties.display.grid
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
grid |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
css.properties.display.ruby
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ruby |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support