diff options
Diffstat (limited to 'files/pt-br/web/css/flex-direction/index.html')
| -rw-r--r-- | files/pt-br/web/css/flex-direction/index.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/files/pt-br/web/css/flex-direction/index.html b/files/pt-br/web/css/flex-direction/index.html new file mode 100644 index 0000000000..53dabec16b --- /dev/null +++ b/files/pt-br/web/css/flex-direction/index.html @@ -0,0 +1,153 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +tags: + - CSS + - CSS Flexbox + - Documentação + - Propriedade CSS +translation_of: Web/CSS/flex-direction +--- +<div>{{CSSRef}}</div> + +<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>flex-direction</code></strong> define como os itens flexíveis são colocados no contêiner flexível, definindo o eixo principal e a direção (normal ou invertido).</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div> + + + +<p>Observer que os valores <code>row</code> e <code>row-reverse</code> são afetados pela direcionalidade do contêiner flexível. Se seu atributo {{HTMLAttrxRef("dir")}} for <strong><code>ltr</code></strong>, <strong><code>row</code></strong> representa o eixo horizontal orientado da esquerda para a direita, e <code>row-reverse</code> está orientado da direita para esquerda; Se seu atributo <strong><code>rtl</code></strong>, <strong><code>row</code> </strong> representa o eixo orientado da direita para a esquerda e <code>row-reverse</code> da esquerda para a direita.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* The direction text is laid out in a line */ +flex-direction: row; + +/* Like <row>, but reversed */ +flex-direction: row-reverse; + +/* The direction in which lines of text are stacked */ +flex-direction: column; + +/* Like <column>, but reversed */ +flex-direction: column-reverse; + +/* Global values */ +flex-direction: inherit; +flex-direction: initial; +flex-direction: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Os seguintes valores são aceitos:</p> + +<dl> + <dt><code>row</code></dt> + <dd>O eixo principal do flex container é definido para ser o mesmo que a direção do texto. Os <strong>pontos de</strong> <strong>início </strong>e <strong>término </strong>principais são iguais à direção do conteúdo.</dd> + <dt><code>row-reverse</code></dt> + <dd>Se comporta da mesma forma que <code>row</code> porém os <strong>pontos de inicio</strong> e <strong>término </strong> seram invertidos (permutados).</dd> + <dt><code>column</code></dt> + <dd>O eixo principal do flex container é igual ao eixo do bloco. Os <strong>pontos de início</strong> e <strong>término </strong>principais são iguais aos pontos de antes e depois do modo de escrita.</dd> + <dt><code>column-reverse</code></dt> + <dd>Se comporta da mesma forma que <code>column</code> porém os <strong>pontos de</strong> <strong>inicio </strong>e <strong>término </strong> seram invertidos (permutados).</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><h4>This is a Column-Reverse</h4> +<div id="content"> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> +</div> +<h4>This is a Row-Reverse</h4> +<div id="content1"> + <div class="box1" style="background-color:red;">A</div> + <div class="box1" style="background-color:lightblue;">B</div> + <div class="box1" style="background-color:yellow;">C</div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#content { + width: 200px; + height: 200px; + border: 1px solid #c3c3c3; + display: flex; + flex-direction: column-reverse; +} + +.box { + width: 50px; + height: 50px; +} + +#content1 { + width: 200px; + height: 200px; + border: 1px solid #c3c3c3; + display: flex; + flex-direction: row-reverse; +} + +.box1 { + width: 50px; + height: 50px; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Example', '', '300', '', 'Web/CSS/flex-direction')}}</p> + +<h2 id="Accessibility_Concerns">Accessibility Concerns</h2> + +<p>Usar a propriedade <code>flex-direction</code> com o valores de <code>row-reverse</code> or <code>column-reverse</code> vai criar uma desconexão entre a apresentação visual do conteúdo e a ordem do DOM. Isso afetará adversamente os usuários com problemas de visão navegando com o auxílio de tecnologia assistiva, como um leitor de tela. Se a oredem visual (CSS) for importante, os usuários de leitores de tela não terão acesso à ordem de leitura correta.</p> + +<ul> + <li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox & the keyboard navigation disconnect — Tink</a></li> + <li><a class="external external-icon" href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.flex-direction")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li> +</ul> |