1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: <display-inside>
slug: Web/CSS/display-inside
translation_of: Web/CSS/display-inside
---
<div>{{CSSRef}}</div>
<p class="summary">Essas palavras-chave especificam o interior do elemento{{CSSxRef("display")}} type, que define o tipo de contexto de formatação que apresenta seu conteúdo (supondo que seja um elemento não substituído). Essas palavras-chave são usadas como valores do <code>display</code> e pode ser usada para fins legados como uma única palavra-chave ou conforme definido na especificação do Nível 3, juntamente com um valor do {{CSSxRef("<display-outside>")}} palavras-chave.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<p>O <code><display-inside></code> O valor é definido usando uma palavra-chave da lista abaixo:</p>
<dl>
<dt><code>flow</code> {{Experimental_Inline}}</dt>
<dd>O elemento expõe seu conteúdo usando o layout de fluxo (layout em bloco e em linha).<br>
Se o seu tipo de exibição externo for
<p><code>inline</code> ou <code>run-in</code>,</p>
<p>e estiver participando de um contexto de formatação em bloco ou em linha, gera uma caixa em linha. Caso contrário, ele gera uma caixa de contêiner de bloco.</p>
<p>Dependendo do valor de outras propriedades como</p>
<p>{{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) e se ele próprio participa de um contexto de formatação em bloco ou embutido, ele estabelece um novo contexto de formatação de bloco (BFC) para seu conteúdo ou integra seu conteúdo ao contexto de formatação pai.</p>
</dd>
<dt><code>flow-root</code> {{Experimental_Inline}}</dt>
<dd>O elemento gera uma caixa de elemento de bloco que estabelece um novo contexto de formatação de bloco, definindo onde está a raiz da formatação.</dd>
<dt><code>table</code></dt>
<dd>Esses elementos se comportam como HTML{{HTMLElement("table")}} elementos. Ele define uma caixa no nível do bloco.</dd>
<dt><code>flex</code></dt>
<dd>O elemento se comporta como um elemento de bloco e expõe seu conteúdo de acordo com o modelo flexbox.</dd>
<dt><code>grid</code></dt>
<dd>O elemento se comporta como um elemento de bloco e expõe seu conteúdo de acordo com o modelo de grade.</dd>
<dt><code>ruby</code> {{Experimental_Inline}}</dt>
<dd>O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo de formatação ruby. Ele se comporta como o HTML correspondente{{HTMLElement("ruby")}} elementos.</dd>
</dl>
<div class="note">
<p><strong>Nota: Navegadores que suportam a sintaxe de dois valores, encontrando apenas o valor interno, como quando</strong><code>display: flex</code> or <code>display: grid</code> especificado, definirá seu valor externo como <code>block</code>. Isso resultará no comportamento esperado; por exemplo, se você especificar um elemento a ser <code>display: grid</code>, você esperaria que a caixa criada no contêiner da grade fosse uma caixa no nível do bloco.</p>
</div>
<h3 id="Sintaxe_formal">Sintaxe formal</h3>
<pre class="syntaxbox">{{CSSSyntax}}</pre>
<h2 id="Exemplo">Exemplo</h2>
<p>Neste exemplo, a caixa pai foi fornecida <code>display: flow-root</code> e assim estabelece um novo BFC e contém o item flutuado.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}</pre>
<h3 id="Resultado">Resultado</h3>
<p>{{EmbedLiveSample("Example", "100%", 180)}}</p>
<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
<p class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte https://github.com/mdn/browser-compat-data e envie-nos uma solicitação de recebimento.</p>
<h3 id="Suporte_a_vários_valores_de_palavras-chave">Suporte a vários valores de palavras-chave</h3>
<p>{{Compat("css.properties.display.multi-keyword_values", 10)}}</p>
<h3 id="Suporte_de_fluxo-raiz">Suporte de fluxo-raiz</h3>
<p>{{Compat("css.properties.display.flow-root", 10)}}</p>
<h3 id="Suporte_de_tabela">Suporte de tabela</h3>
<p>{{Compat("css.properties.display.table_values", 10)}}</p>
<h3 id="Suporte_de_grade">Suporte de grade</h3>
<p>{{Compat("css.properties.display.grid", 10)}}</p>
<h3 id="Suporte_de_flex">Suporte de flex</h3>
<p>{{Compat("css.properties.display.flex", 10)}}</p>
<h3 id="Suporte_de_ruby">Suporte de ruby</h3>
<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{CSSxRef("display")}}
<ul>
<li>{{CSSxRef("<display-outside>")}}</li>
<li>{{CSSxRef("<display-listitem>")}}</li>
<li>{{CSSxRef("<display-internal>")}}</li>
<li>{{CSSxRef("<display-box>")}}</li>
<li>{{CSSxRef("<display-legacy>")}}</li>
</ul>
</li>
<li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Conceitos básicos do Flexbox</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceitos básicos de layout de grade</a></li>
</ul>
|
