aboutsummaryrefslogtreecommitdiff
path: root/files/pt-pt/glossary/cross_axis/index.html
diff options
context:
space:
mode:
authorFlorian Dieminger <me@fiji-flo.de>2021-02-11 18:27:33 +0100
committerGitHub <noreply@github.com>2021-02-11 18:27:33 +0100
commit609ee7efcfe881caa08237948e1ed3252e60afa1 (patch)
treee8c22089de06c8ef1a6d75a6e0d1e893403cd07a /files/pt-pt/glossary/cross_axis/index.html
parentad7f998115dd568832332484debf1f1b16b0c905 (diff)
parent8519a85da1acd5b7863268b6cf6f9e4fd14bcf31 (diff)
downloadtranslated-content-609ee7efcfe881caa08237948e1ed3252e60afa1.tar.gz
translated-content-609ee7efcfe881caa08237948e1ed3252e60afa1.tar.bz2
translated-content-609ee7efcfe881caa08237948e1ed3252e60afa1.zip
Merge pull request #43 from fiji-flo/unslugging-pt-pt
Unslugging pt pt
Diffstat (limited to 'files/pt-pt/glossary/cross_axis/index.html')
-rw-r--r--files/pt-pt/glossary/cross_axis/index.html73
1 files changed, 73 insertions, 0 deletions
diff --git a/files/pt-pt/glossary/cross_axis/index.html b/files/pt-pt/glossary/cross_axis/index.html
new file mode 100644
index 0000000000..2882ed5be8
--- /dev/null
+++ b/files/pt-pt/glossary/cross_axis/index.html
@@ -0,0 +1,73 @@
+---
+title: Eixo transversal
+slug: Glossary/Cross_Axis
+tags:
+ - CSS
+ - Glossário
+ - flexbox
+translation_of: Glossary/Cross_Axis
+original_slug: Glossário/Eixo_transversal
+---
+<p>Numa {{glossary("flexbox")}}, ou eixo transveral é perpendicular ao {{glossary("main axis")}}, o que significa que se a direção for ao longo de uma linha (ou seja, {{cssxref("flex-direction")}} é <code>row</code> ou <code>row-reverse</code>) então o eixo transversal estende-se ao longo das colunas.</p>
+
+<p><img alt="The cross axis runs down the column" src="https://mdn.mozillademos.org/files/15710/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>Se por outro lado a direção for ao longo das colunas ({{cssxref("flex-direction")}} é <code>column</code> or <code>column-reverse</code>) então este eixo estende-se ao longo das linhas.</p>
+
+<p><img alt="The cross axis runs along the row." src="https://mdn.mozillademos.org/files/15711/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>Alinhamento de elementos no eixo transversal faz-se com a propriedade <code>align-items</code> no contentor flexível ou com a propriedade <code>align-self</code> em elementos individuais. No caso de um contentor com várias linhas, que tenha espaço adicional no eixo transversal, pode-se utilizar <code>align-content</code> para controlar o espaçamento das linhas.</p>
+
+<h2 id="Aprender_mais">Aprender mais</h2>
+
+<h3 id="Referência_de_propriedades">Referência de propriedades</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex")}}</li>
+</ul>
+</div>
+
+<h3 id="Aprofundar">Aprofundar</h3>
+
+<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/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
+
+ <ol>
+ <li>{{Glossary("Cross Axis")}}</li>
+ <li>{{Glossary("Flex")}}</li>
+ <li>{{Glossary("Flex Container")}}</li>
+ <li>{{Glossary("Flex Item")}}</li>
+ <li>{{Glossary("Grid")}}</li>
+ </ol>
+ </li>
+ <li>Related CSS Properties
+ <ol>
+ <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>
+ </ol>
+ </li>
+</ol>
+</section>