Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Funcionamento flex-wrap

Bom dia! Não consegui entender como funciona a propriedade "flex-wrap". Alguém, por favor, pode me ajudar?

3 respostas

Oi GIlvar, basicamente o flex-wrap serve para definir se os itens dentro do contêiner poderão ocupar multiplas linhas ou não. Se sim, os elementos quebradão linha quando chegar no limite do elemento pai, caso não, os elementos serão dimencionados de forma a caberem no elemento pai. Entendeu?

solução!

Oii Gilvan,

a propriedade flex força a criação de colunas a partir dos elementos filhos.

Sabendo disso, o conteúdo pode ficar todo apertado dentro do elemento pai, ou pode até extrapolar o tamanho do elemento.

Caso você queira fazer um grid (linhas e colunas) com estes elementos que estão dentro do "pai" (que tem o flex) você precisa utilizar a propriedade flex-wrap, para forçar a quebra de linha no momento em que a largura do conteúdo não couber mais.

Veja se esse teste que fiz aqui ajuda entender: http://codepen.io/vanessametonini/pen/zNmREN

Abraços!

Obrigado aos dois pela ajuda!