From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:42:52 -0500
Subject: initial commit

---
 files/pt-br/web/css/flex-flow/index.html | 89 ++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 files/pt-br/web/css/flex-flow/index.html

(limited to 'files/pt-br/web/css/flex-flow')

diff --git a/files/pt-br/web/css/flex-flow/index.html b/files/pt-br/web/css/flex-flow/index.html
new file mode 100644
index 0000000000..db281a2699
--- /dev/null
+++ b/files/pt-br/web/css/flex-flow/index.html
@@ -0,0 +1,89 @@
+---
+title: flex-flow
+slug: Web/CSS/flex-flow
+tags:
+  - flex-box
+translation_of: Web/CSS/flex-flow
+---
+<div>{{CSSRef}}</div>
+
+<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>flex-flow</code></strong> é uma <a href="/en-US/docs/Web/CSS/Shorthand_properties">junção</a> das propriedades {{cssxref("flex-direction")}} e {{cssxref("flex-wrap")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-flow.html")}}</div>
+
+
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* flex-flow: &lt;'flex-direction'&gt; */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: &lt;'flex-wrap'&gt; */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: &lt;'flex-direction'&gt; and &lt;'flex-wrap'&gt; */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* Global values */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Consulte {{cssxref("flex-direction")}} e {{cssxref("flex-wrap")}} para ver os detalhes sobre os valores.</p>
+
+<h3 id="Sintaxe_formal">Sintaxe formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush:css;highlight:3">elemento {
+  /* O eixo principal é a direção do bloco com main-start e main-end invertidos.
+   * Os itens flex estão dispostos em múltiplas linhas */
+  flex-flow: column-reverse wrap;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox','#flex-flow-property','flex-flow') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.flex-flow")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Guia de Flexbox CSS: <em><a href="/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox">Conceitos básicos de flexbox</a></em></li>
+ <li>Guia de Flexbox CSS: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordenando itens flex</a></em></li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf