css flexbox spell check and correction of links (#3126)

* switch word "flexBox" to "Flexbox"

* capitalize word "tutorial"

* remove unnecessary hyphens

* change src reference to pt-BR pages

* translate text to Portuguese and add more context to flexbox introduction text

* Updating to be according to content repo

Co-authored-by: Nathália Pissuti <nathaliapissuti@gmail.com>

2 files changed, 86 insertions, 111 deletions

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
deleted file mode 100644
index 4430ce10cf..0000000000
--- a/files/pt-br/web/css/css_flexible_box_layout/index.html
+++ /dev/null
@@ -1,111 +0,0 @@
----
-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="Browser_compatibility">Compatibilidade com navegadores</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/index.md b/files/pt-br/web/css/css_flexible_box_layout/index.md
new file mode 100644
index 0000000000..8deb181a74
--- /dev/null
+++ b/files/pt-br/web/css/css_flexible_box_layout/index.md
@@ -0,0 +1,86 @@
+---
+title: CSS Flexible Box Layout
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - Guia
+  - Visão Geral
+  - Referência
+  - flexbox
+---
+{{CSSRef}}
+
+**CSS Flexible Box Layout** é um módulo do [CSS](/pt-BR/docs/Web/CSS) que define um layout multicoluna otimizado para o design de interfaces de usuário, para isso busca lidar com o layout dos itens de maneira unidimensional. No modelo de layout do Flexbox, os filhos de um contêiner flex podem ser dispostos em qualquer direção, e podem "flexibilizar" seus tamanhos, crescendo para preencher o espaço vazio ou diminuindo para evitar o transbordamento do elemento pai. O alinhamento horizontal e vertical dos filhos podem ser facilmente manipulados.
+
+## Exemplo Básico
+
+No exemplo a seguir um contêiner foi definido como `display: flex`, o que significa que os três items filhos dele se tornaram flex. O valor de `justify-content` foi definido como `space-between` para espaçar os itens uniformemente no eixo principal. Uma quantidade igual de espaço é colocada entre cada item com a esquerda e direita dos itens sendo niveladas com as bordas do contêiner flex. Você também pode perceber que os items estão alongados no eixo transversal, isso acontece por causa do valor padrão de `align-items` ser `stretch`(esticar). Os itens se estendem até a altura do contêiner flex, fazendo com que eles sejam tão altos quanto o item mais alto.
+
+{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 600)}}
+
+## Referência
+
+### Propriedades CSS
+
+- {{cssxref("flex")}}
+- {{cssxref("flex-basis")}}
+- {{cssxref("flex-direction")}}
+- {{cssxref("flex-flow")}}
+- {{cssxref("flex-grow")}}
+- {{cssxref("flex-shrink")}}
+- {{cssxref("flex-wrap")}}
+- {{cssxref("order")}}
+
+### Propriedades de Alinhamento
+
+A propriedade `align-content`, `align-self`, `align-items` e `justify-content` apareceram inicialmente na especificação do Flexbox, mas agora estão definidas em Box Alignment. As especificações do Flexbox agora referência a especificação do Box Alignment para definições atualizadas. Propriedades de alinhamento adicional agora também são definidas em Box Alignment.
+
+- {{cssxref("justify-content")}}
+- {{cssxref("align-content")}}
+- {{cssxref("align-items")}}
+- {{cssxref("align-self")}}
+- {{cssxref("place-content")}}
+- {{cssxref("place-items")}}
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
+
+### Entradas do glossário
+
+- {{Glossary("Flexbox", "", 1)}}
+- {{Glossary("Flex Container", "", 1)}}
+- {{Glossary("Flex Item", "", 1)}}
+- {{Glossary("Main Axis", "", 1)}}
+- {{Glossary("Cross Axis", "", 1)}}
+- {{Glossary("Flex", "", 1)}}
+
+## Guia
+
+- [Conceitos básicos de flexbox](/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+  - : Uma visão geral sobre as funcionalidades do Flexbox
+- [Relação entre o Flexbox e os outros métodos de layout](/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods)
+  - : Como o Flexbox está relacionado aos outros métodos de layout, e outras especificações CSS
+- [Alinhando itens em um contêiner flex](/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)
+  - : Como as propriedades Box Alignment trabalham com Flexbox.
+- [Ordenando itens flex](/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)
+  - : Explicando as diferentes formas de mudar a order e direção dos itens, e cobrindo os possíveis problemas em fazer isso.
+- [Proporções de Controle de itens flex ao longo do eixo principal](/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)
+  - : Explicando as propriedades flex-grow, flex-shrink e flex-basis.
+- [Dominando a embalagem de itens flex](/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)
+  - : Como criar contêiners flex com múltiplas linhas e controlar a exibição dos itens nessas linhas.
+- [Casos típicos de uso do Flexbox](/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox)
+  - : Padrão de projeto comuns que são casos de uso típicos do Flexbox.
+- [Retrocompatibilidade do Flexbox](/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox)
+  - : Status do Flexbox nos browsers, problemas de interoperabilidade e suporte para browsers antigos e versões das especificações
+
+## Especificações
+
+| Especificação                            | Status                               | Comentário             |
+| ---------------------------------------- | ------------------------------------ | ------------------- |
+| {{ SpecName('CSS3 Flexbox') }} | {{ Spec2('CSS3 Flexbox') }} | Definição inicial. |
+
+## Veja também
+
+- [Flexbugs](https://github.com/philipwalton/flexbugs)
+  - : Uma lista curada pela comunidade de bugs do Flexbox nos navegadores e soluções alternativas