blob: 6949c35908d7deb5f596722dd9a7f30cd4b61d6a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
---
title: Flexbox
slug: Glossary/Flexbox
tags:
- CSS
- Glossário
- flexbox
translation_of: Glossary/Flexbox
original_slug: Glossário/Flexbox
---
<p>Flexbox é o nome geralmente dado ao Módulo de Layout em Caixa Flexível do CSS (<a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module</a>), um modelo de layout com o propósito de alinhar elementos numa determinada direção — ao longo de uma linha ou de uma coluna.</p>
<p>Na sua especificação, Flexbox é descrito como um modelo de layout para desenho da interface do utilizador. A principal funcionalidade do Flexbox é o facto de os elementos do layout poderem encolher ou crescer. Pode-se especificar quanto espaço cada elemento ocupa ou quanto espaço deve haver entre elementos.</p>
<p>Flexbox permite alinhamento de elementos no eixo principal ou no eixo transversal, e assim permite grande controlo sobre o tamanho e alinhamento de um grupo de elementos.</p>
<h2 id="Aprender_mais">Aprender mais</h2>
<h3 id="Referência_das_propriedades">Referência das propriedades</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>
<h3 id="Aprofundar">Aprofundar</h3>
<ul>
<li><em><a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1 Specification</a></em></li>
<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/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</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/Ordering_Flex_Items">Ordering flex items</a></em></li>
<li>CSS Flexbox Guide: <em><a href="/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></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>
<li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</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("Flex")}}</li>
<li>{{Glossary("Flex Container")}}</li>
<li>{{Glossary("Flex Item")}}</li>
<li>{{Glossary("Grid")}}</li>
</ol>
</li>
<li>Propriedades CSS relacionadas
<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>
|
