initial commit

1 files changed, 162 insertions, 0 deletions

diff --git a/files/pt-br/web/css/flex-wrap/index.html b/files/pt-br/web/css/flex-wrap/index.html
new file mode 100644
index 0000000000..a73e5626eb
--- /dev/null
+++ b/files/pt-br/web/css/flex-wrap/index.html
@@ -0,0 +1,162 @@
+---
+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>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<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">&lt;h4&gt;This is an example for flex-wrap:wrap &lt;/h4&gt;
+&lt;div class="content"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is an example for flex-wrap:nowrap &lt;/h4&gt;
+&lt;div class="content1"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is an example for flex-wrap:wrap-reverse &lt;/h4&gt;
+&lt;div class="content2"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+</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="Compatibilidade_com_navegadores">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>