Atributo flex-wrap do CSS

Definição e uso

A propriedade flex-wrap determina se os itens flexíveis devem quebrar linha.

Notas:Se o elemento não for um item flexível, a propriedade flex é inválida.

Faz com que os itens flexíveis quebrem linha conforme necessário:

div {
  display: flex;   
  flex-wrap: wrap;
}

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

Valor	Descrição
nowrap	Valor padrão. Determina que os itens flexíveis não devem quebrar linha.
wrap	Determina que os itens flexíveis devem quebrar linha conforme necessário.
wrap-reverse	Determina que os itens flexíveis devem quebrar linha conforme necessário, na direção oposta.
initial	Defina essa propriedade como seu valor padrão. Veja initial.
inherit	Herda essa propriedade do elemento pai. Veja inherit.

Valor padrão:	nowrap
Herança:	Não
Produção de animação:	Não suportado. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.flexWrap="nowrap"

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Números com -webkit- ou -moz- indicam a primeira versão com prefixo usada.

Chrome	IE / Edge	Firefox	Safari	Opera
29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0