These keywords specify the element’s inner
display
type, which defines the type of formatting context that lays out its contents (assuming it is a non-replaced element). These keywords are used as values of the
display
property, and can be used for legacy purposes as a single keyword, or as defined in the Level 3 specification alongside a value from the
<display-outside>
keywords.
Valid
<display-inside>
values:
flow
If its outer display type is
inline
or
run-in
, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.
Depending on the value of other properties (such as
position
,
float
，或
overflow
) and whether it is itself participating in a block or inline formatting context, it either establishes a new
block formatting context
(BFC) for its contents or integrates its contents into its parent formatting context.
flow-root
table
<table>
elements. It defines a block-level box.
flex
grid
ruby
<ruby>
elements.
注意
: Browsers that support the two value syntax, on finding the inner value only, such as when
display: flex
or
display: grid
is specified, will set their outer value to
block
. This will result in expected behavior; for example if you specify an element to be
display: grid
, you would expect that the box created on the grid container would be a block level box.
In this example the parent box has been given
display: flow-root
and so establishes a new BFC and contains the floated item.
<div class="box"> <div class="float">I am a floated box!</div> <p>I am content inside the container.</p> </div>
.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
The definition of 'display-inside' in that specification. |
候选推荐 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Multi-keyword values Experimental | Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 70 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
实验。期望将来行为有所改变。
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
flow-root
|
Chrome 完整支持 58 | Edge 完整支持 79 | Firefox 完整支持 53 | IE 不支持 No | Opera 完整支持 45 | Safari 完整支持 13 | WebView Android 完整支持 58 | Chrome Android 完整支持 58 | Firefox Android 完整支持 53 | Opera Android 完整支持 43 | Safari iOS 完整支持 13 | Samsung Internet Android 完整支持 7.0 |
完整支持
不支持
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
table
,
table-cell
,
table-column
,
table-column-group
,
table-footer-group
,
table-header-group
,
table-row
，和
table-row-group
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 8 | Opera 完整支持 7 | Safari 完整支持 1 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
grid
|
Chrome 完整支持 57 |
Edge
完整支持
16
|
Firefox 完整支持 52 |
IE
部分支持
10
Prefixed
注意事项
|
Opera 完整支持 44 | Safari 完整支持 10.1 | WebView Android 完整支持 57 | Chrome Android 完整支持 57 | Firefox Android 完整支持 52 | Opera Android 完整支持 43 | Safari iOS 完整支持 10.3 |
Samsung Internet Android
完整支持
6.0
注意事项
|
完整支持
部分支持
见实现注意事项。
要求使用供应商前缀或不同名称。
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
flex
|
Chrome 完整支持 29 | Edge 完整支持 12 |
Firefox
完整支持
20
注意事项
|
IE
部分支持
11
注意事项
|
Opera
完整支持
16
|
Safari 完整支持 9 | WebView Android 完整支持 4.4 | Chrome Android 完整支持 29 |
Firefox Android
完整支持
20
注意事项
|
Opera Android
完整支持
16
|
Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 2.0 |
完整支持
部分支持
见实现注意事项。
用户必须明确启用此特征。
使用非标名称。
要求使用供应商前缀或不同名称。
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ruby
,
ruby-base
,
ruby-base-container
,
ruby-text
，和
ruby-text-container
|
Chrome 不支持 No | Edge 不支持 12 — 79 |
Firefox
完整支持
38
|
IE 完整支持 7 | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No |
Firefox Android
完整支持
38
|
Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
用户必须明确启用此特征。