From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/flex-wrap/index.html | 162 +++++++++++++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 files/pt-br/web/css/flex-wrap/index.html (limited to 'files/pt-br/web/css/flex-wrap') diff --git a/files/pt-br/web/css/flex-wrap/index.html b/files/pt-br/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..a73e5626eb --- /dev/null +++ b/files/pt-br/web/css/flex-wrap/index.html @@ -0,0 +1,162 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS + - CSS Flex Box + - Propriedades CSS + - Referencia +translation_of: Web/CSS/flex-wrap +--- +
{{ CSSRef}}
+ +

A propriedade CSS flex-wrap define se os itens flexíveis são forçados a ficarem na mesma linha ou se podem ser quebradas em varias linhas. Se o argumento for valido, ele define a direção em que as linhas são empilhadas.

+ +

{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}

+ + + +

Veja Using CSS flexible boxes para mais propriedades e informação.

+ +

Syntax

+ +
flex-wrap: nowrap; /* Default value */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Global values */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+
+ +

A propriedade flex-wrap é especificada como uma unica palavra-chave escolhida na lista de valores abaixo.

+ +

Valores

+ +

Os seguintes valores são aceitos :

+ +
+
nowrap
+
Os itens flexíveis são agrupados em uma unica linha, o que pode fazer com que o flex container transborde. O cross-start é equivalente ao início ou antes, dependendo do valor da {{cssxref("flex-direction")}}. Este é o valor padrão.
+
wrap
+
Os itens flexíveis são quebrados em multiplas linhas. O cross-start é equivalente a iniciar ou antes dependendo do valor do flex-direction e cross-end é o oposto do especificado cross-start.
+
wrap-reverse
+
Se comporta da mesma maneira que o wrap mas a de linha ocorre na direção contrária, ou seja, para a linha acima.
+
+ +

Formal definição

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Exemplos

+ +

Definindo valores em um flex container wrap

+ +

HTML

+ +
+
<h4>This is an example for flex-wrap:wrap </h4>
+<div class="content">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:nowrap </h4>
+<div class="content1">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:wrap-reverse </h4>
+<div class="content2">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+
+ +

CSS

+ +
/* Common Styles */
+.content,
+.content1,
+.content2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.content div,
+.content1 div,
+.content2 div {
+    height: 50%;
+    width: 300px;
+}
+.red {
+    background: orangered;
+}
+.green {
+    background: yellowgreen;
+}
+.blue {
+    background: steelblue;
+}
+
+/* Flexbox Styles */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+
+
+ +

Resultados

+ +

{{ EmbedLiveSample('Setting_flex_container_wrap_values', '700px', '700px', '', 'Web/CSS/flex-wrap') }}

+ +

Especificação

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }}
+ +

Compatibilidade com navegadores

+ + + +

{{Compat("css.properties.flex-wrap")}}

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf