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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
title: flex-wrap
slug: Web/CSS/flex-wrap
tags:
- CSS
- CSS Flex Box
- Propriedades CSS
- Referencia
translation_of: Web/CSS/flex-wrap
---
<div>{{ CSSRef}}</div>
<p>A propriedade <a href="/en-US/docs/CSS">CSS</a> <strong><code>flex-wrap</code></strong> define se os itens flexíveis são forçados a ficarem na mesma linha ou se podem ser quebradas em varias linhas. Se o argumento for valido, ele define a direção em que as linhas são empilhadas.</p>
<p>{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}</p>
<p>Veja <a href="/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> para mais propriedades e informação.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush:css no-line-numbers notranslate">flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;
</pre>
<p>A propriedade <code>flex-wrap</code> é especificada como uma unica palavra-chave escolhida na lista de valores abaixo.</p>
<h3 id="Valores">Valores</h3>
<p><span class="tlid-translation translation" lang="pt"><span title="">Os seguintes valores são aceitos</span></span> :</p>
<dl>
<dt><code>nowrap</code></dt>
<dd>Os itens flexíveis são agrupados em uma unica linha, o que pode fazer com que o flex container transborde. <span class="tlid-translation translation" lang="pt"><span title="">O</span></span> <strong>cross-start</strong> <span class="tlid-translation translation" lang="pt"><span title=""> é equivalente ao <strong>início </strong>ou <strong>antes</strong>, dependendo do valor da </span></span> {{cssxref("flex-direction")}}. Este é o valor padrão.</dd>
<dt><code>wrap</code></dt>
<dd>Os itens flexíveis são quebrados em multiplas linhas. O <strong>cross-start </strong> <span class="tlid-translation translation" lang="pt"><span title="">é equivalente a iniciar ou antes</span></span> dependendo do valor do <code>flex-direction</code> e <strong>cross-end</strong> é o oposto do especificado <strong>cross-start</strong>.</dd>
<dt><code>wrap-reverse</code></dt>
<dd>Se comporta da mesma maneira que o <code>wrap</code> mas a de linha<span> ocorre na direção contrária, ou seja, para a linha acima.</span></dd>
</dl>
<h2 id="Formal_definição">Formal definição</h2>
<p>{{cssinfo}}</p>
<h2 id="Formal_syntax">Formal syntax</h2>
{{csssyntax}}
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Definindo_valores_em_um_flex_container_wrap">Definindo valores em um flex container wrap</h3>
<h4 id="HTML">HTML</h4>
<div id="Live_Sample">
<pre class="brush: html notranslate"><h4>This is an example for flex-wrap:wrap </h4>
<div class="content">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap </h4>
<div class="content1">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse </h4>
<div class="content2">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">/* Common Styles */
.content,
.content1,
.content2 {
color: #fff;
font: 100 24px/100px sans-serif;
height: 150px;
text-align: center;
}
.content div,
.content1 div,
.content2 div {
height: 50%;
width: 300px;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
/* Flexbox Styles */
.content {
display: flex;
flex-wrap: wrap;
}
.content1 {
display: flex;
flex-wrap: nowrap;
}
.content2 {
display: flex;
flex-wrap: wrap-reverse;
}
</pre>
</div>
<h4 id="Resultados">Resultados</h4>
<p>{{ EmbedLiveSample('Setting_flex_container_wrap_values', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</p>
<h2 id="Especificação">Especificação</h2>
<table class="standard-table">
<thead>
<tr>
<th>Especificação</th>
<th>Status</th>
<th>Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}</td>
<td>{{ Spec2('CSS3 Flexbox') }}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{Compat("css.properties.flex-wrap")}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>Guia CSS Flexbox: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
<li>Guia CSS Flexbox: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
</ul>
|
