flex-wrap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨setembro de 2015⁩.

A propriedadeCSSflex-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.

Experimente

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

<section>  <div>    <div>Item One</div>    <div>Item Two</div>    <div>Item Three</div>    <div>Item Four</div>    <div>Item Five</div>    <div>Item Six</div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  width: 80%;  display: flex;}#example-element > div {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;  width: 60px;  margin: 10px;}

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

Syntax

css

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

A propriedadeflex-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. Ocross-start é equivalente aoinício ouantes, dependendo do valor daflex-direction. Este é o valor padrão.
wrap: Os itens flexíveis são quebrados em multiplas linhas. Ocross-start é equivalente a iniciar ou antes dependendo do valor doflex-direction ecross-end é o oposto do especificadocross-start.
wrap-reverse: Se comporta da mesma maneira que owrap mas a de linha ocorre na direção contrária, ou seja, para a linha acima.

Formal definição

Initial value	`nowrap`
Aplica-se a	flex containers
Inherited	não
Computed value	as specified
Animation type	discrete

Formal syntax

flex-wrap =
nowrap|
wrap|
wrap-reverse

Exemplos

Definindo valores em um flex container wrap

HTML

html

<h4>This is an example for flex-wrap:wrap</h4><div>  <div>1</div>  <div>2</div>  <div>3</div></div><h4>This is an example for flex-wrap:nowrap</h4><div>  <div>1</div>  <div>2</div>  <div>3</div></div><h4>This is an example for flex-wrap:wrap-reverse</h4><div>  <div>1</div>  <div>2</div>  <div>3</div></div>

CSS

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;}