<display-inside> CSS type
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.
Syntax
Valid <display-inside> values:
flow-
The element lays out its contents using flow layout (block-and-inline layout).
If its outer display type is
inline, 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, oroverflow) 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-
The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.
table-
These elements behave like HTML
<table>elements. It defines a block-level box. flex-
The element behaves like a block element and lays out its content according to the flexbox model.
grid-
The element behaves like a block element and lays out its content according to the grid model.
ruby-
The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML
<ruby>elements.
Note:
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.
Formal syntax
<display-inside> =
flow |
flow-root |
table |
flex |
grid |
ruby
Examples
In this example the parent box has been given display: flow-root and so establishes a new BFC and contains the floated item.
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;
}
Result
Specifications
| Specification |
|---|
| CSS Display Module Level 3 # typedef-display-inside |
Browser compatibility
css.properties.display.flow-root
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
flow-root
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.table
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
table
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.flex
| desktop | 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
| desktop | 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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ruby
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support