initial commit

5 files changed, 825 insertions, 0 deletions

diff --git a/files/pt-br/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/pt-br/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
new file mode 100644
index 0000000000..971912174f
--- /dev/null
+++ b/files/pt-br/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
@@ -0,0 +1,209 @@
+---
+title: Aligning Items in a Flex Container
+slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Uma das razões pela qual flexbox rapidamente despertou interesse dos desenvolvedores web é que ela trouxe capacidade de alinhamento apropriada para web pela primeira vez. Tem capacidade de alinhamento vertical apropriada, e assim finalmente podemos de modo fácil centralizar uma caixa. Neste guia, veremos detalhadamente como as propriedades de alinhamento e justificação funcionam no Flexbox.</p>
+
+<p>Para centralizar nossa caixa nós usamos a propriedade <code>align-items</code> para alinhar nosso item no eixo transversal, que neste caso é o eixo do bloco indo verticalmente. Nós usamos <code>justify-content</code> para alinhar o item no eixo principal, que neste caso é o eixo indo horizontalmente.</p>
+
+<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p>
+
+<p>Você pode dar uma olhada no código deste exemplo abaixo. Altere o tamanho do container ou elemento aninhado e o elemento aninhado sempre permanece centralizado.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Propriedades_que_controlam_o_alinhamento">Propriedades que controlam o alinhamento</h2>
+
+<p>As propriedades que nós veremos neste guia são as seguintes.</p>
+
+<ul>
+ <li>{{cssxref("justify-content")}} — controla o alinhamento de todos os itens no eixo principal.</li>
+ <li>{{cssxref("align-items")}} — controla o alinhamento de todos os itens no eixo transversal.</li>
+ <li>{{cssxref("align-self")}} — controla o alinhamento individual de um item no eixo transversal.</li>
+ <li>{{cssxref("align-content")}} — descrito na especificação como “packing flex lines”; controla o espaço entre as linhas no eixo transversal.</li>
+</ul>
+
+<p>Nós também descobriremos como margens automáticas podem ser utilizadas para o alinhamento no flexbox.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The alignment properties in Flexbox have been placed into their own specification — <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. It is expected that this spec will ultimately supersede the properties as defined in Flexbox Level One.</p>
+</div>
+
+<h2 id="The_Cross_Axis">The Cross Axis</h2>
+
+<p>As propriedades <code>align-items</code> e <code>align-self</code> controlam o alinhamento dos nossos itens no eixo transversal, em colunas se <code>flex-direction</code> é <code>row</code> e entre linhas se <code>flex-direction</code> é <code>column</code>.</p>
+
+<p>Nós estamos usando o alinhamento transversal na maioria dos exemplos. Se adicionarmos <code>display: flex</code> para um contêiner, todos os itens filhos se tornam itens flexíveis organizados em uma linha. Todos irão se esticar para serem tão altos quanto o item mais alto, pois este item define a altura dos itens no eixo transversal. Se o seu contêiner possui uma altura definida, então os itens se estenderão para esta altura, independemente da quantidade de conteúdo que está dentro deste item.</p>
+
+<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p>
+
+<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p>
+
+<p>A razão pela qual os itens passam a ter a mesma altura é que o valor inicial do <code>align-items</code>, a propriedade que controla o alinhamento do eixo transversal, está definida como <code>stretch</code>.</p>
+
+<p>Nós podemos usar outros valores para controlar como os itens se alinham:</p>
+
+<ul>
+ <li><code>align-items: flex-start</code></li>
+ <li><code>align-items: flex-end</code></li>
+ <li><code>align-items: center</code></li>
+ <li><code>align-items: stretch</code></li>
+ <li><code>align-items: baseline</code></li>
+</ul>
+
+<p>No exemplo abaixo, o valor do <code>align-items</code> está definido como <code>stretch</code>. Tente outros valores e veja como todos os itens se alinham no contêiner.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p>
+
+<h3 id="Alinhando_um_item_com_align-self">Alinhando um item com <code>align-self</code></h3>
+
+<p>A propriedade <code>align-items</code> adiciona a propriedade <code>align-self</code> em todos os itens flex como um grupo. Ou seja, você pode explicitamente declarar a propriedade <code>align-self</code> para impactar um único item. A propriedade <code>align-self</code> aceita todos os mesmo valores que <code>align-items</code> mais o valor <code>auto</code>, que irá resetar o valor que está configurado no container flex.</p>
+
+<p>Neste próximo exemplo, o container flex possui <code>align-items: flex-start</code>, que implica em todos os itens estarem alinhados ao início do eixo transversal. Foquei no primeiro item usando o seletor <code>first-child</code> e configurei este item para <code>align-self: stretch</code>; outro item foi selecionado usando a classe <code>selected</code> e <code>align-self: center</code>. Você pode mudar o valor do <code>align-items</code> ou mudar o valor do <code>align-self</code> para focar em itens individuais para ver como funciona.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}</p>
+
+<h3 id="Changing_the_main_axis">Changing the main axis</h3>
+
+<p>So far we have looked at the behaviour when our <code>flex-direction</code> is <code>row</code>, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p>
+
+<p>If we change our <code>flex-direction</code> to column, <code>align-items</code> and <code>align-self</code> will align the items to the left and right.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p>
+
+<p>You can try this out in the example below, which has a flex container with <code>flex-direction: column</code> yet otherwise is exactly the same as the previous example.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p>
+
+<h2 id="Aligning_content_on_the_cross_axis_—_the_align-content_property">Aligning content on the cross axis — the align-content property</h2>
+
+<p>So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the <code>align-content</code> property to control the distribution of space between the rows. In the specification this is described as <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">packing flex lines</a>.</p>
+
+<p>For <code>align-content</code> to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.</p>
+
+<p>The <code>align-content</code> property takes the following values:</p>
+
+<ul>
+ <li><code>align-content: flex-start</code></li>
+ <li><code>align-content: flex-end</code></li>
+ <li><code>align-content: center</code></li>
+ <li><code>align-content: space-between</code></li>
+ <li><code>align-content: space-around</code></li>
+ <li><code>align-content: stretch</code></li>
+ <li><code>align-content: space-evenly</code> (not defined in the Flexbox specification)</li>
+</ul>
+
+<p>In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of <code>align-content</code> is <code>space-between</code>, which means that the available space is shared out <em>between</em> the flex lines, which are placed flush with the start and end of the container on the cross axis.</p>
+
+<p>Try out the other values to see how the <code>align-content</code> property works.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p>
+
+<p>Once again we can switch our <code>flex-direction</code> to <code>column</code> in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p>
+
+<div class="note">
+<p><strong>Note</strong>: the value <code>space-evenly</code> is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.</p>
+</div>
+
+<p>See the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">documentation for <code>justify-content</code> on MDN</a> for more details on all of these values and browser support.</p>
+
+<h2 id="Aligning_content_on_the_main_axis">Aligning content on the main axis</h2>
+
+<p>Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — <code>justify-content</code>. This is because we are only dealing with items as a group on the main axis. With <code>justify-content</code> we control what happens with available space, should there be more space than is needed to display the items.</p>
+
+<p>In our initial example with <code>display: flex</code> on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of <code>justify-content</code> being <code>flex-start</code>. Any available space is placed at the end of the items.</p>
+
+<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>The <code>justify-content</code> property accepts the same values as <code>align-content</code>.</p>
+
+<ul>
+ <li><code>justify-content: flex-start</code></li>
+ <li><code>justify-content: flex-end</code></li>
+ <li><code>justify-content: center</code></li>
+ <li><code>justify-content: space-between</code></li>
+ <li><code>justify-content: space-around</code></li>
+ <li><code>justify-content: stretch</code></li>
+ <li><code>justify-content: space-evenly</code> (not defined in the Flexbox specification)</li>
+</ul>
+
+<p>In the example below, the value of <code>justify-content</code> is <code>space-between</code>. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p>
+
+<p>If the main axis is in the block direction because <code>flex-direction</code> is set to <code>column</code>, then <code>justify-content</code> will distribute space between items in that dimension as long as there is space in the flex container to distribute.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p>
+
+<h3 id="Alignment_and_Writing_Modes">Alignment and Writing Modes</h3>
+
+<p>Remember that with all of these alignment methods, the values of <code>flex-start</code> and <code>flex-end</code> are writing mode-aware. If the value of <code>justify-content</code> is <code>start</code> and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.</p>
+
+<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.</p>
+
+<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>The live example below has the <code>direction</code> property set to <code>rtl</code> to force a right-to-left flow for our items. You can remove this, or change the values of <code>justify-content</code> to see how flexbox behaves when the start of the inline direction is on the right.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p>
+
+<h2 id="Alignment_and_flex-direction">Alignment and flex-direction</h2>
+
+<p>The start line will also change if you change the <code>flex-direction</code> property — for example using <code>row-reverse</code> instead of <code>row</code>.</p>
+
+<p>In this next example I have items laid out with <code>flex-direction: row-reverse</code> and <code>justify-content: flex-end</code>. In a left to right language the items all line up on the left. Try changing <code>flex-direction: row-reverse</code> to <code>flex-direction: row</code>. You will see that the items now move to the right hand side.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p>
+
+<p>While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. <code>flex-start</code> will be where the start of a sentence of text would begin.</p>
+
+<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>You can switch them to display in the block direction for the language of your document by selecting <code>flex-direction: column</code>. Then <code>flex-start</code> will then be where the top of your first paragraph of text would start.</p>
+
+<p><img alt="Diagram showing start at the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. <code>flex-start</code> will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.</p>
+
+<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<h2 id="Using_auto_margins_for_main_axis_alignment">Using auto margins for main axis alignment</h2>
+
+<p>We don’t have a <code>justify-items</code> or <code>justify-self</code> property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.</p>
+
+<p>A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a <code>justify-self</code> property, however consider the image below. I have three items on one side and two on the other. If I were able to use <code>justify-self</code> on item <em>d</em>, it would also change the alignment of item <em>e</em> that follows, which may or may not be my intention.</p>
+
+<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p>
+
+<p>Instead we can target item 4 and separate it from the first three items by giving it a <code>margin-left</code> value of <code>auto</code>. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.</p>
+
+<p>In this live example, I have flex items arranged simply into a row with the basic flex values, and the class <code>push</code> has <code>margin-left: auto</code>. You can try removing this, or adding the class to another item to see how it works.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p>
+
+<h2 id="Future_alignment_features_for_Flexbox">Future alignment features for Flexbox</h2>
+
+<p>At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the <code>space-evenly</code> value for <code>align-content</code> and <code>justify-content</code> properties.</p>
+
+<p>The Box Alignment module also includes other methods of creating space between items, such as the <code>column-gap</code> and <code>row-gap</code> feature as seen in <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. The inclusion of these properties in Box Alignment means that in future we should be able to use <code>column-gap</code> and <code>row-gap</code> in flex layouts too, and in Firefox 63 you will find the first browser implementation of the gap properties in flex layout.</p>
+
+<p>My suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in Grid Layout. Both specifications use the alignment properties as detailed in the Box Alignment specification. You can see how these properties behave when working with a grid in the MDN article <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, and I have also compared how alignment works in these specifications in my <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Box Alignment in Flexbox</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">Box Alignment in Grid Layout</a></li>
+</ul>
diff --git a/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html b/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html
new file mode 100644
index 0000000000..05318caa79
--- /dev/null
+++ b/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html
@@ -0,0 +1,239 @@
+---
+title: Conceitos básicos de flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox
+tags:
+  - CSS
+  - Flex
+  - Tutorial
+  - conceitos
+  - conteiner
+  - eixos
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">O <em>Flexible Box Module</em>, geralmente chamado de <em>flexbox</em>, foi projetado tanto como um modelo de <em>layout</em> unidimensional quanto como um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento. Este artigo fornece um resumo das principais funcionalidades do <em>flexbox</em>, as quais exploraremos com mais detalhes no restante deste guia.</p>
+
+<p>Quando se descreve o flexbox como sendo unidimensional, enfatiza-se o fato de que ele lida com <em>o layout </em>em uma dimensão de cada vez - seja uma linha ou uma coluna. Isto pode ser comparado com o modelo bidimensional de <a href="/pt-PT/docs/Web/CSS/layout_de_grelha_css">CSS - Layout de Grade</a>, que permite o controle simultâneo das colunas e linhas.</p>
+
+<h2 id="Os_eixos_do_flexbox">Os eixos do <em>flexbox</em></h2>
+
+<p>Ao se utilizar o <em>flexbox</em>, é preciso ter em mente que todas as operações realizadas relacionam-se a dois eixos: o eixo principal e o eixo transversal. O eixo principal é definido através da propriedade <code><a href="https://developer.mozilla.org/pt-PT/docs/Web/CSS/flex-direction" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!">flex-direction</a></code> e o eixo transversal encontra-se na direção perpendicular a ele. Como esses eixos são as engrenagens fundamentais do flexbox é necessário compreender minuciosamente o seu funcionamento.</p>
+
+<h3 id="Eixo_principal">Eixo principal</h3>
+
+<p>Conforme descrito acima, a propriedade <code>flex-direction</code> define a direção do eixo principal e pode tem quatro valores possíveis:</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>Se o valor escolhido for <code>row</code> (linha) ou <code>row-reverse</code> (linha reversa), seu eixo principal se moverá ao longo da linha — na <strong>direção inline</strong>.</p>
+
+<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p>Se o valor escolhido for <code>column</code> (coluna) ou <code>column-reverse</code> (coluna reversa) e o eixo principal se moverá do topo até o fim da página — na <strong>direção block</strong>.</p>
+
+<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<h3 id="Eixo_transversal">Eixo transversal</h3>
+
+<p>O eixo transversal é perpendicular ao eixo principal, logo, se a propriedade <code>flex-direction</code> estiver definida nas linhas, como <code>row</code> ou <code>row-reverse</code>, o eixo transversal estará na direção das colunas, como <code>column</code> ou <code>column-reverse</code>.</p>
+
+<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>Se o eixo principal for definido nas colunas, como <code>column</code> ou <code>column-reverse</code>, então o eixo transversal estará na direção das linhas, como <code>row</code> ou <code>row-reverse</code>.</p>
+
+<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>Compreender a diferença entre os eixos principal e perpendicular é o que importa quando começamos a observar o alinhamento ou justificação dos itens flexíveis (flex items); o <em>flexbox</em> possui propriedades que alinham e justificam o conteúdo ao longo de um eixo ou de outro.</p>
+
+<h2 id="Linhas_de_Início_e_Fim">Linhas de Início e Fim</h2>
+
+<p>Outra área crítica em termos de compreensão é como o Flexbox não faz nenhuma premissa sobre o modo de escrita do documento. No passado, o CSS utilizava fortemente os modos de escrita horizontal e da esquerda para a direita. Métodos modernos de layout abrangem uma variedade de modos de escrita e, portanto, não assumimos mais que uma linha de texto começará no canto superior esquerdo do documento e sigará para o lado direito, com novas linhas aparecendo uma após a as outra.</p>
+
+<p>Essa discussão sobre a relação entre o <em>flexbox</em> e a especificação do modo de escrita será abordada um artigo posterior, contudo, a descrição a seguir explica brevemente porque não se fala sobre esquerda e direita/ acima e abaixo quando descreve-se a direção para a qual os elementos <em>flex</em> fluem.</p>
+
+<p>Se o valor da propriedade <code>flex-direction</code> for <code>row (linha)</code>, considerando o estilo de escrita ocidental, a borda inicial do eixo principal estará localizada à esquerda e a borda final, à direita.</p>
+
+<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Considerando um idioma como o Árabe, que possui um estilo de escrita oriental, teremos o inverso: a borda inicia do eixo principal estará localizada à direita e a borda final, à esquerda.</p>
+
+<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>Em ambos os casos, a borda inicial do eixo transversal está na parte superior do contêiner flex e a borda final, na parte inferior, visto que ambos os idiomas têm um estilo de de escrita horizontal.</p>
+
+<p>Após um tempo de prática, pensar em termos de início e final ao invés de esquerda e direita se tornará natural e será útil ao lidar com outros métodos de layout, como CSS Grid, que seguem os mesmos padrões.</p>
+
+<h2 id="Contêiner_Flex">Contêiner <em>Flex</em></h2>
+
+<p>A área de um documento que faz uso do <em>flexbox</em> é chamada de <strong>contêiner <em>flex</em></strong>. Para criar essa estrutura, define-se o valor da propriedade {{cssxref("display")}} do elemento representado pelo contêiner como <code>flex</code> ou <code>inline-flex</code>. Desse modo, os elementos-filhos desse contêiner tornar-se-ão do tipo <em>flex</em>. Como todas as propriedades no CSS possuem valores padrão, ao criar um contêiner flex, os elementos nele contidos apresentarão o seguinte comportamento:</p>
+
+<ul>
+ <li>Exibição em linha (o padrão do <code>flex-direction</code> é <code>row</code>).</li>
+ <li>Alinhamento na  borda inicial do eixo principal.</li>
+ <li>Não há expansão no eixo principal, mas pode haver contração.</li>
+ <li>Haverá expansão vertical para preencher a altura do eixo transversal.</li>
+ <li>A propriedade {{cssxref("flex-basis")}} estará definida como <code>auto</code>.</li>
+ <li>A propriedade {{cssxref("flex-wrap")}} estará definida como <code>nowrap</code>.</li>
+</ul>
+
+<p>O resultado final é que todos os elementos serão alinhados em uma linha, usando o tamanho do conteúdo como o tamanho no eixo principal. Se houver mais itens do que é possível caber no container, não haverá uma quebra de linha; ao invés disso, irão ultrapassar o limite horizontal da página. Se alguns elementos forem mais altos que outros, todos os itens se estenderão ao longo do eixo transversal para preencher seu tamanho total.</p>
+
+<p>É possível conferir essas questões no exemplo prático abaixo. Tente editar ou adicionar mais itens para testar o comportamento inicial do Flexbox.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p>
+
+<h3 id="Propriedade_flex-direction">Propriedade <em><code>flex-direction</code></em></h3>
+
+<p>A propriedade {{cssxref("flex-direction")}} permite alterar a direção na qual os elementos flex serão exibidos ao longo do eixo principal. Definindo a propriedade <code>flex-direction </code>como<code> row-reverse</code> (linha reversa) ainda teremos os elementos dispostos em uma linha, entretanto, as linhas inicial e final serão trocadas.<br>
+ <br>
+ Se mudarmos a <code>flex-direction</code> para a <code>column</code> (coluna), o eixo principal exibirá os elemento em uma coluna. Trocando o valor para <code>column-reverse</code> (coluna reversa) fará com que as linhas inicial e final sejam novamente trocadas.<br>
+ <br>
+ No exemplo prático abaixo tem-se a propriedade <code>flex-direction</code> definida como <code>row-reverse</code>. Experimente os outros valores - <code>row</code>, <code>column</code> e <code>column-reverse</code> - para ver o que acontece com o conteúdo.<br>
+ <br>
+ {{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+
+<h2 id="Quebra_de_linha_com_flex-wrap">Quebra de linha com <em>"<strong>flex-wrap</strong>"</em></h2>
+
+<p>Embora o <em>flexbox</em> seja um modelo unidimensional, é possível fazer com que elementos <em>flex</em> sejam agrupados em múltiplas linhas. Ao fazer isso, considera-se cada linha como um novo contêiner <em>flex</em>. Qualquer distribuição espacial ocorrerá ao longo essa linha, sem referência às linhas de ambos os lados. Para gerar a quebra automática das linhas adicione a propriedade {{cssxref("flex-wrap")}} com o valor <code>wrap</code>. Assim, se elementos forem muito grandes para serem exibidos em uma única linha, eles serão agrupados em outras linhas.</p>
+
+<p>O exemplo prático abaixo contém elementos <em>flex</em> aos quais foi dada uma determinada largura, cuja soma totaliza um valor grande demais para caber no container. Visto que a propriedade <code>flex-wrap</code> está definida como <code>wrap</code>, os itens serão reorganizados em mais de uma linha. Trocando-se para <code>nowrap</code>, que também é o valor inicial, eles encolherão para caber no contêiner, porque estão usando valores iniciais de flexbox que permitem que os itens encolham. O uso do <code>nowrap</code> causaria um vazamento se os itens não encolhessem ou não diminuíssem o suficiente para caber.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+
+<p>Saiba mais sobre o empacotamento de itens flexíveis no guia <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Masterização de Empacotamento de Itens Flexíveis</a> (em Inglês).</p>
+
+<h2 id="Propriedade_abreviada_flex-flow">Propriedade abreviada <em>flex-flow</em></h2>
+
+<p>Pode-se combinar as propriedades <code>flex-direction</code> e <code>flex-wrap</code> de forma abreviada através da propriedade {{cssxref("flex-flow")}}. O primeiro valor especificado é o <code>flex-direction</code> e o segundo valor é o <code>flex-wrap</code>.</p>
+
+<p>No exemplo prático abaixo, tente alterar o primeiro valor para um dos valores permitidos para a propriedade <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> ou <code>column-reverse</code>, e também altere o segundo para <code>wrap</code> e <code>nowrap</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+
+<h2 id="Expansão_encolhimento_e_tamanho_dos_elementos_flex">Expansão, encolhimento e tamanho dos elementos <em>flex</em></h2>
+
+<p>Para ter mais controle sobre os elementos <em>flex</em> é possível alterá-los diretamente utilizando as três propriedades abaixo:</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<p>Na presente seção, examinar-se-á brevemente tais propriedades. Para se aprofundar neste conteúdo sugete-se o tutorial <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Taxas de Controle de Elementos Flex ao Longo do Eixo Principal</a> (em inglês).</p>
+
+<p>Antes que essas propriedades possam fazer sentido, é preciso compreender o conceito de <strong>espaço disponível</strong>. Quando se modifica o valor das propriedades  acima, altera-se a forma que o espaço disponível é distribuído entre os elementos. Tal conceito de espaço disponível também é relevante quando se trata do alinhamento.</p>
+
+<p>Conforme o exemplo abaixo, se houver três elementos com 100 pixels de comprimento em um contêiner de 500 pixels, então o espaço total necessário para acomodá-los será de 300 pixels. Desse modo, sobrarão 200 pixels de espaço útil. Se os valores iniciais não forem modificados, então o <em>flexbox </em>posicionará esse espaço após o último item.</p>
+
+<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>Se for necessário que os elementos cresçam proprocionamente ou não e preencham o espaço disponível, deverá haver método que faça essa distribuição espacial entre eles, conforme será visto nas seções subsequentes.</p>
+
+<h3 id="Propriedade_flex-basis">Propriedade <em><code>flex-basis</code></em></h3>
+
+<p>A propriedade <code>flex-basis </code>define o tamanho inicial dos elementos, em unidades de <em>pixel</em>, antes que o espaço remanescente seja redistribuído. O valor inicial desta propriedade é <code>auto </code>— neste caso o navegador observa se os itens possuem o mesmo tamanho. No exemplo acima, todos os itens têm uma largura de 100 pixels, que é utilizada como padrão na propriedade <code>flex-basis</code>.</p>
+
+<p>Se os elementos não possuírem um tamanho padrão, então as dimensões dos seus conteúdos (imagem, texto, etc) serão passadas como parâmetro para propriedade flex-basis. É por isso que quando escreve-se <code>display: flex</code> no elemento-pai para criar o contêiner, todos os elementos-filhos se organizam em linha e ocupam apenas o espaço necessário para exibir seu conteúdo.</p>
+
+<h3 id="Propriedade_flex-grow">Propriedade <em><code>flex-grow</code></em></h3>
+
+<p>Com a propriedade <code>flex-grow</code> definida como um inteiro positivo, os elementos <em>flex</em> podem crescer ao longo do eixo principal, a partir do valor mínimo estabelecido no <code>flex-basis</code>. Isto fará com que o elemento se estique e ocupe qualquer espaço disponível nesse eixo ou uma proporção dele, caso outros elementos-irmãos também possam crescer.</p>
+
+<p>Atribuir o valor 1 à propriedade <code>flex-grow</code> fará com que o espaço disponível no contêiner <em>flex</em> seja igualmente distribuído entre todos os elementos do exemplo acima. Logo, os elementos-filhos irão se expandir para preencher o contêiner no sentido do eixo principal.</p>
+
+<p>Como visto no parágrafo anterior, a propriedade <code>flex-grow</code> pode ser empregada para distribuir o espaço proporcionalmente entre os elementos de um contêiner, contudo, se atribuirmos ao primeiro elemento o valor 2 parae 1 aos elementos restantes, duas partes serão dadas ao primeiro elemento (100px de 200px totais) e uma parte para cada um dos outros dois elementos (50px de 200px totais).</p>
+
+<h3 id="Propriedade_flex-shrink">Propriedade <code>flex-shrink</code></h3>
+
+<p>Enquanto a propriedade <code>flex-grow </code>permite aumentar a largura dos elementos dentro do contêiner para completar o espaço disponível no eixo principal, a propriedade <code>flex-shrink</code> faz o oposto, controlando a redução dos mesmos. Caso não haja espaço suficiente para acomodar todos os elementos e o valor da propriedade <code>flex-shrink </code>seja um inteiro positivo, a largura pode ser reduzida a um valor menor do que a definida na propriedade <code>flex-basis</code>. Assim como na propriedade flex-grow, diferentes valores podem ser atribuídos a um elemento de modo que ele encolha mais do que os outros - um elemento cuja propriedade <code>flex-shrink</code> receba um valor inteiro maior irá diminuir mais do que os seus irmão que tenham valores menores.</p>
+
+<p>O tamanho mínimo do elemento será levado em consideração ao se calcular a quantidade real de encolhimento que ocorrerá, o que significa que a propriedade flex-shrink se comporta de modo potencialmente menos consistente do que a propriedade flex-grow. Examinar-se-á mais detalhadamente o funcionamento desse algoritmo no artigo Taxas de Controle de Elementos Flex ao Longo do Eixo Principal.</p>
+
+<div class="note">
+<p>Note que os valores para as propriedades<code> flex-grow</code> e <code>flex-shrink</code> são proporcionais.  Particularmente, se tivermos todos os nossos elementos definidos como flex: <code>1 1 200px</code> e então quisermos que um deles cresça o dobro, temos de definir o elemento como flex: <code>2 1 200px</code>. Entretanto, podemos escrever flex: <code>10 1 200px</code> e flex: <code>20 1 200px</code> se quisermos.</p>
+</div>
+
+<h3 id="Abreviatura_para_os_valores_das_propriedades_flex">Abreviatura para os valores das propriedades flex</h3>
+
+<p>As propriedades <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> raramente são empregas de forma individual. Usualmente, elas são combinadas através da propriedade de abreviação {{cssxref("flex")}}. A abreviatura <code>flex</code> permite definir os três valores na seguinte ordem:<code> flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p>
+
+<p>O exemplo prático abaixo permite que sejam testados diferentes valores com a propriedade de abreviação <code>flex</code>; lembre-se que o primeiro campo corresponde à propriedade <code>flex-grow</code>, onde um valor inteiro e positivo faz-se o elemento crescer. O segundo campo é a propriedade <code>flex-shrink</code> e, ao contrário do anterior, um valor inteiro e positivo pode fazer os elementos encolherem, mas  somente se o seu comprimento total ultrapassar o limite horizontal do contêiner, no sentido do eixo principal. O último campo contém a propriedade <code>flex-basis</code>, que define o valor base, em unidades de <em>pixel</em>, para aumentar e diminuir o elemento quando da aplicação das propriedades anteriores.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p>
+
+<p>Há ainda alguns valores de abreviação predefinidos, que cobrem a maioria dos casos de uso. São aplicados com frequência em turoriais e, normalmente, suprem todas as necessidades práticas. Os valores predefinidos podem ser vistos abaixo:</p>
+
+<ul>
+ <li><code>flex: initial</code></li>
+ <li><code>flex: auto</code></li>
+ <li><code>flex: none</code></li>
+ <li><code>flex: &lt;positive-number&gt;</code></li>
+</ul>
+
+<p>Definir <code>flex: initial</code> reseta os elementos para valores-padrão do Flexbox, sendo equivale a <code>flex: 0 1 auto</code>. Neste ultimo caso, o valor da propriedade <code>flex-grow</code> é 0, então os elementos não irão crescer mais do que o tamanho-base definido na propriedade <code>flex-basis</code>. o valor da propriedade <code>flex-shrink</code> é 1, indicando que o elemento pode ser reduzido caso seja necessário, para evitar que o limite do contêiner seja ultrapassado. Por fim, o valor da propriedade <code>flex-basis</code> é <code>auto</code> e assim será usad o tamanho mínimo necessário para preencher a dimensão do eixo principal.</p>
+
+<p>Definir <code>flex: auto</code> é equivalente a <code>flex: 1 1 auto</code>. Essa configuração é semelhante a <code>flex:initial</code>, mas nesse caso os elementos podem aumentar para preencher o contêiner ou diminuir se necessário, para evitar o transbordamento lateral da tela.</p>
+
+<p>Definir <code>flex: none</code> irá criar um elemento flex totalmente inflexível, sendo o equivalente a escrever <code>flex: 0 0 auto</code>. O elementos não poderão crescer ou diminuir, mas serão criados usando o <em>flexbox</em> com a propriedade <code>flex-basis</code> com o valor <code>auto</code>.</p>
+
+<p>Outra abreviação normalmente vista em tutoriais é <code>flex: 1</code> ou <code>flex: 2</code> e assim por diante, o que equipara-se a <code>flex: 1 1 0</code>. Os elementos podem crescer ou diminuir a partir da propriedade <code>flex-basis</code> com valor nulo.</p>
+
+<p>Teste essas formas abreviadas no exemplo prático abaixo:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p>
+
+<h2 id="Alinhamento_justificação_e_distribuição_de_espaço_livre_entre_os_elementos">Alinhamento, justificação e distribuição de espaço livre   entre os elementos</h2>
+
+<p>Um atributo chave do <em>flexbox</em> é a capacidade de alinhar e justificar os elementos  <em>flex</em> nos eixos principal e transversal e distribuir o espaço entre eles.</p>
+
+<h3 id="Propriedade_align-items">Propriedade <code>align-items</code></h3>
+
+<p>A propriedade {{cssxref("align-items")}} irá alinhar os elementos no eixo transversal.</p>
+
+<p>O valor inicial desta propriedade é <code>stretch</code> e é por essa razão que, por padrão, os elementos <em>flex</em> se estendem até a maior altura. De fato, eles se esticam para preencher o contêiner flex - o item mais alto define a altura deste.</p>
+
+<p>Pode-se definir a propriedade <code>align-items</code> como <code>flex-start</code>, de modo que os elementos fiquem alinhados com topo do contêiner, <code>flex-end</code> para alinhá-los a partir da base ou <code>center</code>, para que o alinhamento seja centralizado.</p>
+
+<p>Teste essa propriedade e seus possíveis valores no exemplo prático abaixo — colocou-se uma determinada  altura no contêiner flex, de modo que se perceba como os elementos podem ser movidos no interior do mesmo. Veja o que acontece ao definir cada um dos possíveis valores da propriedade <strong>align-items</strong>:</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+
+<h3 id="Propriedade_justify-content">Propriedade <code>justify-content</code></h3>
+
+<p>A propriedade {{cssxref("justify-content")}} é empregada para alinhar os elementos ao longo do eixo principal, cuja direção (<code>row </code>ou <code>column</code>) é definida a partir da propriedade <code>flex-direction</code>. O valor inicial é <code>flex-start</code>, que alinha os elementos rente à borda esquerda do contêiner, mas também pode ser definido como <code>flex-end</code>, que resulta em um alinhamento oposto, rente à borda direita do contêiner, ou <code>center</code>, para alinhá-los ao centro.</p>
+
+<p>O valor <code>space-between</code> pode ser usado pode ser usado para ocupar todo o espaço livre após a disposição dos itens e dividí-lo igualmente entre os itens, para que haja a mesma quantidade de espaço entre cada elemento. Para gerar uma quantidade igual de espaço à direita e à esquerda, usa-se o valor <code>space-around</code>.</p>
+
+<p>Tente os seguintes valores da propriedada <code>justify-content</code> no exemplo prático abaixo:</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+
+<p>No artigo <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Alinhando Elementos em um Contêiner Flex</a> (em inglês) tais propriedades serão abordadas mais detalhadamente, de modo a compreender melhor o seu funcionamento. Contudo, os exemplos simples abordados aqui serão úteis na maioria dos casos.</p>
+
+<h2 id="Próximos_passos">Próximos passos</h2>
+
+<p>Após ler este artigo, você deve ser capaz de compreender as características básicas do Flexbox. No próximo artigo, iremos examinar <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">como essa especificação se relaciona com outras partes do CSS</a> (em inglês). </p>
diff --git a/files/pt-br/web/css/css_flexible_box_layout/index.html b/files/pt-br/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..7bf920f341
--- /dev/null
+++ b/files/pt-br/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,111 @@
+---
+title: CSS Flexible Box Layout
+slug: Web/CSS/CSS_Flexible_Box_Layout
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Flexible</strong> is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h2 id="Guia">Guia</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Usando CSS flexBox</a></dt>
+ <dd>tutorial passo-à-passo de como construir layouts com o FlexBox</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Usando flexBox na organização de aplicações web</a></dt>
+ <dd>Tutorial ensinando como usar o flexBox no contexto de aplicações web</dd>
+</dl>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_Do_Browser">Compatibilidade Do Browser</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("20.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>10.0{{property_prefix("-ms")}}<br>
+    11.0</td>
+   <td>12.10</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>4.4</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/pt-br/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/pt-br/web/css/css_flexible_box_layout/ordering_flex_items/index.html
new file mode 100644
index 0000000000..953f5598d6
--- /dev/null
+++ b/files/pt-br/web/css/css_flexible_box_layout/ordering_flex_items/index.html
@@ -0,0 +1,131 @@
+---
+title: Ordering Flex Items
+slug: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
+---
+<p>{{CSSRef}}</p>
+
+<p>Os novos métodos de layout, como Flexbox e Grid, trazem a possibilidade de controlar a ordem do conteúdo. Neste artigo, veremos como você pode alterar a ordem visual do seu conteúdo ao usar o Flexbox. Também consideraremos as implicações de reordenar itens do ponto de vista da acessibilidade..</p>
+
+<h2 id="Reverse_the_display_of_the_items">Reverse the display of the items</h2>
+
+<p>the {{cssxref("flex-direction")}} property can take one of four values:</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>column</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>The first two values ​​keep the items in the same order that they appear in the document source order and display them sequentially from the start line.</p>
+
+<p><img alt="The items are displayed in a row starting on the left." src="https://mdn.mozillademos.org/files/15649/Basics1.png" style="display: flex; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p><img alt="The items are displayed as a column starting from the top " src="https://mdn.mozillademos.org/files/15650/align10.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>The second two values ​​reverse the items by switching the start and end lines.</p>
+
+<p><img alt="The items are displayed in reverse order starting on the right-hand line." src="https://mdn.mozillademos.org/files/15651/align9.png" style="display: flex; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="The items are displayed in a column in reverse order starting at the bottom line." src="https://mdn.mozillademos.org/files/15652/align11.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Remember that the start line relates to writing modes. The row-related examples above demonstrate how <code>row</code> and <code>row-reverse</code> work in a left-to-right language such as English. If you are working in a right-to-left language like Arabic then <code>row</code> would start on the right, <code>row-reverse</code> on the left.</p>
+
+<p><img alt="Flex containers with Arabic letters showing how row starts from the right hand side and row-reverse from the left." src="https://mdn.mozillademos.org/files/15647/order-rtl.png" style="display: flex; height: 302px; margin: 0px auto; width: 528px;"></p>
+
+<p>This can seem like a neat way to display things in reverse order however you should be mindful that the items are only <em>visually</em> displayed in reverse order. The specification says the following on this matter:</p>
+
+<blockquote>
+<p>“Note: The reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. This allows authors to manipulate the visual presentation while leaving the source order intact for non-CSS UAs and for linear models such as speech and sequential navigation.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Ordering and Orientation</a></p>
+</blockquote>
+
+<p>If your items were links or some other element that the user could tab to, then the tabbing order would be the order that these items appear in the document source — not your visual order.</p>
+
+<p>If you are using a reverse value, or otherwise reordering your items, you should consider whether you actually need to change the logical order in the source. The specification continues with a warning not to use reordering to fix issues in your source:</p>
+
+<blockquote>
+<p>“Authors <em>must not</em> use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.”</p>
+</blockquote>
+
+<div class="note">
+<p><strong>Note</strong>: For some years Firefox had a bug whereby it would attempt to follow the visual order and not the source order, making it behave differently to other browsers. This has now been fixed. You should always take the source order as the logical order of the document as all up-to-date user agents will be following the specification and doing so.</p>
+</div>
+
+<p>In the live example below I have added a focus style in order that as you tab from link to link you can see which is highlighted. If you change the order using <code>flex-direction</code> you can see how the tab order continues to follow the order that the items are listed in the source.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}</p>
+
+<p>In the same way that changing the value of <code>flex-direction</code> does not change the order in which items are navigated to, changing this value does not change paint order. It is a visual reversal of the items only.</p>
+
+<h2 id="The_order_property">The <code>order</code> property</h2>
+
+<p>In addition to reversing the order in which flex items are visually displayed, you can target individual items and change where they appear in the visual order with the {{cssxref("order")}} property.</p>
+
+<p>The <code>order</code> property is designed to lay the items out in <em>ordinal groups</em>. What this means is that items are assigned an integer that represents their group. The items are then placed in the visual order according to that integer, lowest values first. If more than one item has the same integer value, then within that group the items are laid out as per source order.</p>
+
+<p>As an example, I have 5 flex items, and assign <code>order</code> values as follows:</p>
+
+<ul>
+ <li>Source item 1: <code>order: 2</code></li>
+ <li>Source item 2: <code>order: 3</code></li>
+ <li>Source item 3: <code>order: 1</code></li>
+ <li>Source item 4: <code>order: 3</code></li>
+ <li>Source item 5: <code>order: 1</code></li>
+</ul>
+
+<p>These items would be displayed on the page in the following order:</p>
+
+<ul>
+ <li>Source item 3: <code>order: 1</code></li>
+ <li>Source item 5: <code>order: 1</code></li>
+ <li>Source item 1: <code>order: 2</code></li>
+ <li>Source item 2: <code>order: 3</code></li>
+ <li>Source item 4: <code>order: 3</code></li>
+</ul>
+
+<p><img alt="Items have a number showing their source order which has been rearranged." src="https://mdn.mozillademos.org/files/15653/order-property.png" style="display: flex; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>You can play around with the values in this live example below and see how that changes the order. Also, try changing <code>flex-direction</code> to <code>row-reverse</code> and see what happens — the start line is switched so the ordering begins from the opposite side.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}</p>
+
+<p>Flex items have a default <code>order</code> value of <code>0</code>, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit <code>order</code> value.</p>
+
+<p>You can also use negative values with order, which can be quite useful. If you want to make one item display first, and leave the order of all other items unchanged, you can give that item an order of <code>-1</code>. As this is lower than 0 the item will always be displayed first.</p>
+
+<p>In the live code example below I have items laid out using Flexbox. By changing which item has the class <code>active</code> assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}</p>
+
+<p>The items are displayed in what is described in the specification as <em>order-modified document order</em>. The value of the order property is taken into account before the items are displayed.</p>
+
+<p>Order also changes the paint order of the items; items with a lower value for <code>order</code> will be painted first and those with a higher value for <code>order</code> painted afterwards.</p>
+
+<h2 id="The_order_property_and_accessibility">The order property and accessibility</h2>
+
+<p>Use of the <code>order</code> property has exactly the same implications for accessibility as changing the direction with <code>flex-direction</code>. Using <code>order</code> changes the order in which items are painted, and the order in which they appear visually. It does not change the sequential navigation order of the items. Therefore if a user is tabbing between the items, they could find themselves jumping around your layout in a very confusing way.</p>
+
+<p>By tabbing around any of the live examples on this page, you can see how order is potentially creating a strange experience for anyone not using a pointing device of some kind. To read more about this disconnect of visual order and logical order and some of the potential problems it raises for accessibility, see the following resources.</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox and the keyboard navigation disconnect</a></li>
+ <li><a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">HTML Source Order vs CSS Display Order</a></li>
+ <li><a href="https://alastairc.uk/2017/06/the-responsive-order-conflict/">The Responsive Order Conflict for Keyboard Focus</a></li>
+</ul>
+
+<h2 id="Use_cases_for_order">Use cases for order</h2>
+
+<p>There are sometimes places where the fact that the logical and therefore reading order of flex items is separate from the visual order, is helpful. Used carefully the <code>order</code> property can allow for some useful common patterns to be easily implemented.</p>
+
+<p>You might have a design, perhaps a card that will display a news item. The heading of the news item is the key thing to highlight and would be the element that a user might jump to if they were tabbing between headings to find content they wanted to read. The card also has a date; the finished design we want to create is something like this.</p>
+
+<p><img alt="A design component with a date, then heading and then content." src="https://mdn.mozillademos.org/files/15648/order-card.png" style="height: 400px; width: 618px;"></p>
+
+<p>Visually the date appears above the heading, in the source. However, if the card was read out by a screen reader I would prefer that the title was announced first and then the publication date. We can make this so using the <code>order</code> property.</p>
+
+<p>The card is going to be our flex container, with <code>flex-direction</code> set to column. I then give the date an <code>order</code> of <code>-1</code>. This pulls it up above the heading.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}</p>
+
+<p>These small tweaks are the sort of cases where the <code>order</code> property makes sense. Keep the logical order as the reading and tab order of the document, and maintain that in the most accessible and structured fashion. Then use <code>order</code> for purely visual design tweaks. When doing so take care that you are not reordering items that could be accessed by the keyboard as a user is tabbing around. Especially when using newer layout methods you should ensure that your browser testing includes testing the site using keyboard only, rather than a mouse or touchscreen. You will quickly see if your development choices make getting around the content difficult.</p>
diff --git a/files/pt-br/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/pt-br/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html
new file mode 100644
index 0000000000..ec50aab3fe
--- /dev/null
+++ b/files/pt-br/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html
@@ -0,0 +1,135 @@
+---
+title: Casos típicos de uso do Flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">In this guide we will take a look at some of the common use cases for flexbox — those places where it makes more sense than another layout method.</p>
+
+<h2 id="Por_que_escolher_flexbox">Por que escolher flexbox?</h2>
+
+<p>In a perfect world of browser support, the reason you'd choose to use flexbox is because you want to lay a collection of items out in one direction or another. As you lay out your items you want to control the dimensions of the items in that one dimension, or control the spacing between items. These are the uses that flexbox was designed for. You can read more about the difference between flexbox and CSS Grid Layout in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of Flexbox to other layout methods</a>, where we discuss how flexbox fits into the overall picture of CSS Layout.</p>
+
+<p>In reality we also often use Flexbox for jobs that might be better done by Grid Layout, as a fallback for Grid, and also in order to get alignment capabilities. This is something that may well change once Box Alignment is implemented in Block Layout. In this guide I look at some of the typical things you might use flexbox for today.</p>
+
+<h2 id="Navegação">Navegação</h2>
+
+<p>A common pattern for navigation is to have a list of items displayed as a horizontal bar. This pattern, as basic as it seems, was difficult to achieve before flexbox. It forms the most simple of flexbox examples, and could be considered the ideal flexbox use case.</p>
+
+<p>When we have a set of items that we want to display horizontally, we may well end up with additional space. We need to decide what to do with that space, and have a couple of options. We either display the space outside of the items — therefore spacing them out with white space between or around them — or we absorb the extra space inside the items and therefore need a method of allowing the items to grow and take up this space.</p>
+
+<h3 id="Space_distributed_outside_the_items">Space distributed outside the items</h3>
+
+<p>To distribute the space between or around the items we use the alignment properties in flexbox, and the {{cssxref("justify-content")}} property. You can read more about this property in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a flex container</a>, which deals with aligning items on the main axis.</p>
+
+<p>In the below live example we display the items at their natural size and by using <code>justify-content: space-between</code> make equal amounts of space between the items. You can change how the space is distributed using the <code>space-around</code> value, or where supported, <code>space-evenly</code>. You could also use <code>flex-start</code> to place the space at the end of the items, <code>flex-end</code> to place it before them, or <code>center</code> to centre the navigation items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p>
+
+<h3 id="Space_distributed_within_the_items">Space distributed within the items</h3>
+
+<p>A different pattern for navigation would be to distribute the available space within the items themselves, rather than create space between them. In this case we would use the {{cssxref("flex")}} properties to allow items to grow and shrink in proportion to one another as described in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling ratios of flex items along the main axis</a>.</p>
+
+<p>If I wanted all of my navigation items to have equal width, then I might use <code>flex: auto</code>, which is the shorthand for <code>flex: 1 1 auto</code> — all items grow and shrink from a flex-basis of auto. This would mean that the longer item would have more space.</p>
+
+<p>In the live example below try changing <code>flex: auto</code> to <code>flex: 1</code>. This is the shorthand for <code>flex: 1 1 0</code> and causes all of the items become the same width, as they are working from a flex-basis of 0 allowing all of the space to be distributed evenly.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p>
+
+<h2 id="Split_navigation">Split navigation</h2>
+
+<p>Another way to align items on the main axis is to use auto margins. This enables the design pattern of a navigation bar where one group of items are aligned left and another group aligned right.</p>
+
+<p>Here we are using the auto margins technique described in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Using_auto_margins_for_main_axis_alignment">Using auto margins for main axis alignment</a>. The items are aligned on the main axis with <code>flex-start</code> as this is the initial behaviour of flexbox, and we are aligning the item on the right by giving it a left margin of auto. You can move the class from one item to another to change where the split happens.</p>
+
+<p>Also in this example we are using margins on the flex items to create a gap between items, and a negative margin on the container in order that the items still remain flush with the right and left edges. Until the <code>gap</code> properties from the Box Alignment specification are implemented in flexbox, we have to use margins in this way if we want to create a gutter between items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p>
+
+<h2 id="Center_item">Center item</h2>
+
+<p>Before flexbox, developers would joke that the hardest problem in web design was vertical centering. This has now been made straightforward using the alignment properties in flexbox, as the following live example shows.</p>
+
+<p>You can play with the alignment, aligning the item to the start with <code>flex-start</code> or end with <code>flex-end</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p>
+
+<p>In the future we may not need to make a container a flex container just to centre a single item, as the Box Alignment properties will ultimately be implemented in Block layout. For now however, if you need to properly centre one thing inside another, flexbox is the way to do it. As in the above example, make a container into a flex container, and then use either <code>align-items</code> on the parent element or target the flex item itself with <code>align-self</code>.</p>
+
+<h2 id="Card_layout_pushing_footer_down">Card layout pushing footer down</h2>
+
+<p>Whether you use flexbox or CSS Grid to lay out a list of card components, these layout methods only work on direct children of the flex or grid component. This means that if you have variable amounts of content, the card will stretch to the height of the grid area or flex container. Any content inside uses regular block layout, meaning that on a card with less content the footer will rise up to the bottom of the content rather than stick to the bottom of the card.</p>
+
+<p><img alt="Two card components showing that the internals of the component do not stretch with the wrapper." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p>
+
+<p>Flexbox can solve this. We make the card a flex container, with {{cssxref("flex-direction")}}<code>: column</code>. We then set the content area to <code>flex: 1</code>, which is the shorthand for <code>flex: 1 1 0</code> — the item can grow and shrink from a flex basis of <code>0</code>. As this is the only item that can grow, it takes up all available space in the flex container and pushes the footer to the bottom. If you remove the <code>flex</code> property from the live example you will see how the footer then moves up to sit directly under the content.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p>
+
+<h2 id="Media_objects">Media objects</h2>
+
+<p>The media object is a common pattern in web design — this pattern has an image or other element to one side and text to the right. Ideally a media object should be able to be flipped — moving the image from left to right.</p>
+
+<p>We see this pattern everywhere, used for comments, and anywhere we need to display images and descriptions. With flexbox we can allow the part of the media object containing the image to take its sizing information from the image, and then the body of the media object flexes to take up the remaining space.</p>
+
+<p>In the live example below you can see our media object. I have used the alignment properties to align the items on the cross axis to <code>flex-start</code>, and then set the <code>.content</code> flex item to <code>flex: 1</code>. As with our column layout card pattern above, using <code>flex: 1</code> means this part of the card can grow.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p>
+
+<p>Some things that you might want to try in this live example relate to the different ways you might want to constrain the media object in your design.</p>
+
+<p>To prevent the image growing too large, add a {{cssxref("max-width")}} to the image. As that side of the media object is using the initial values of flexbox it can shrink but not grow, and uses a <code>flex-basis</code> of auto. Any {{cssxref("width")}} or max-width applied to the image will become the <code>flex-basis</code>.</p>
+
+<pre class="brush: css notranslate">.image img {
+  max-width: 100px;
+}
+</pre>
+
+<p>You could also allow both sides to grow and shrink in proportion. If you set both sides to <code>flex: 1</code>, they will grow and shrink from a {{cssxref("flex-basis")}} of 0, so you will end up with two equal-sized columns. You could either take the content as a guide and set both to <code>flex: auto</code>, in which case they would grow and shrink from the size of the content or any size applied directly to the flex items such as a width on the image.</p>
+
+<pre class="brush: css notranslate">.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<p>You could also give each side different {{cssxref("flex-grow")}} factors, for example setting the side with the image to <code>flex: 1</code> and the content side to <code>flex: 3</code>. This will mean they use a <code>flex-basis</code> of <code>0</code> but distribute that space at different rates according to the <code>flex-grow</code> factor you have assigned. The flex properties we use to do this are described in detail in the guide <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling ratios of flex items along the main axis</a>.</p>
+
+<pre class="brush: css notranslate">.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<h3 id="Flipping_the_media_object">Flipping the media object</h3>
+
+<p>To switch the display of the media object so that the image is on the right and the content is on the left we can use the <code>flex-direction</code> property set to <code>row-reverse</code>. The media object now displays the other way around. I have achieved this in the live example by adding a class of <code>flipped</code> alongside the existing <code>.media</code> class. This means you can see how the display changes by removing that class from the html.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p>
+
+<h2 id="Form_controls">Form controls</h2>
+
+<p>Flexbox is particularly useful when it comes to styling form controls. Forms have lots of markup and lots of small elements that we typically want to align with each other. A common pattern is to have an {{htmlelement("input")}} element paired with a {{htmlelement("button")}}, perhaps for a search form or where you simply want your visitor to enter an email address.</p>
+
+<p>Flexbox makes this type of layout easy to achieve. I have contained my <code>&lt;button&gt;</code> and <code>&lt;input&gt;</code> field in a wrapper which I have given a border and set to <code>display: flex</code>. I then use the flex properties to allow the <code>&lt;input&gt;</code> field to grow, while the button does not grow. This means we have a pair of fields, with the text field growing and shrinking as the available space changes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p>
+
+<p>You could add a label or icon to the left as easily as we popped the button onto the right. I have added a label, and other than some styling for background colour I didn’t need to change the layout. The stretchy input field now has a little less space to play with but it uses the space left after the two items are accounted for.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p>
+
+<p>Patterns like this can make it much easier to create a library of form elements for your design, which easily accommodate additional elements being added. You are taking advantage of the flexibility of flexbox by mixing items that do not grow with those that do.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>While exploring the above patterns you have hopefully started to see how you can think through the best way to use flexbox to achieve the result that you want. Quite often you have more than one choice. Mix items that cannot stretch with those that can, use the content to inform the size, or allow flexbox to share out space in proportion. It’s up to you. </p>
+
+<p>Think about the best way to present the content that you have and then see how flexbox or other layout methods can help you achieve it.</p>