A propriedade flex-wrap: wrap; quebra os elementos que não cabem para a linha de baixo, neste caso do vídeo todos os elementos já estavam um abaixo do outro, por que que quando usa esta propriedade, dois elementos passam a ocupar a mesma linha?
A propriedade flex-wrap: wrap; quebra os elementos que não cabem para a linha de baixo, neste caso do vídeo todos os elementos já estavam um abaixo do outro, por que que quando usa esta propriedade, dois elementos passam a ocupar a mesma linha?
Olá, Emanuel! Tudo bem?
Antes de aplicar o display flex, os itens estão com o display por padrão, que é o block. O display block organiza cada elemento como bloco, um acima do outro. Porém, esse formato um em cima do outro é ideal apenas para telas de celulares, mobile. Já para telas maiores, tem que ficar dois por linha, e isso o display block não permite. Então é necessário utilizar o display flex + flex-wrap.
Consegui ajudar em sua dúvida?
Bons estudos! :)
Olá, Emanuel! Também fiquei nessa dúvida, e acredito que quando usou o wrap, só couberam 2 na mesma linha porque no arquivo style.css, na linha 150, foi definido que a largura mínima (min-width) de cada item da lista fosse de 282px. Aí ele quebra a linha porque não cabem mais de 2 itens com essa largura no flex container que estamos usando.
(Estou iniciando os estudos agora, então não tenho certeza quanto a essa explicação. Se alguém tiver outra explicação, será muito bem vinda)