Bom dia! Não consegui entender como funciona a propriedade "flex-wrap". Alguém, por favor, pode me ajudar?
Bom dia! Não consegui entender como funciona a propriedade "flex-wrap". Alguém, por favor, pode me ajudar?
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?
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!