[Dúvida] Dificuldade com um exercício de Flexbox

Olá Eduardo, tudo bem?

Pelo que entendi, você está tendo dificuldades em fazer as imagens redimensionarem de acordo com o tamanho da tela, mesmo utilizando o flex-shrink e definindo um tamanho para as mesmas.

Uma possível solução para esse problema é adicionar a propriedade max-width: 100%; na classe .square. Isso fará com que as imagens tenham um tamanho máximo de 100% da largura do elemento pai, que no caso é a div com a classe .flexItem.

Dessa forma, quando a largura da tela for reduzida, as imagens também serão redimensionadas proporcionalmente.

Ficaria assim:

.square {
  width: 200px;
  max-width: 100%;
}

Espero ter ajudado e bons estudos!

Obrigado, Luan. Agora as imagens e suas div são redimensionadas quando reduzo a largura da tela.

Porém, parece que o flex-shrink não está fazendo efeito. Mesmo pedindo para que apenas a primeira imagem tenha o flex-shrink de 3, todas as imagens ocupam o mesmo espaço ao invés de uma delas ocupar um tamanho diferente das outras três.

Olá, Eduardo! Agradeço o seu retorno!

Só para entender, essa atividade que você descreveu no início como base da sua dúvida: "aula 05, atividade "07: Diminuindo proporcionalmente os elementos"", eu não encontrei. Na atividade 07 da aula 5 é um exercício sobre "flex-grow" para aumentar os elementos. Entretanto, vi que tem a atividade 5, nessa mesma aula, falando sobre o flex-shrink, para encolher elementos proporcionalmente, então creio que você esteja se referindo a este, certo? Se eu estiver enganado me corrija por favor. :)

Quando organizamos um grupo de elementos com flexbox, eles já tem o efeito de encolherem proporcionalmente se ajustando ao layout. O flex-shrink é usado apenas para alterar a forma que eles encolhem proporcionalmente, uns mais, outros menos.

A proporção do encolhimento é calculada dividindo o valor de flex-shrink do item pelo somatório dos valores de flex-shrink de todos os itens dentro do mesmo container flexível. O resultado dessa divisão determina a proporção do encolhimento para cada item. Quanto maior a proporção, maior será o encolhimento relativo do item.

Aqui está um exemplo para ilustrar o encolhimento proporcional com flex-shrink:

.container {
  display: flex;
}

.item {
  flex-shrink: 1;
}

.item:first-child {
  flex-shrink: 2;
}

Nesse exemplo, temos um container flexível com dois itens. O primeiro item tem flex-shrink: 2, enquanto o segundo item tem flex-shrink: 1. Isso significa que o primeiro item encolherá duas vezes mais rápido que o segundo item quando houver falta de espaço.

No entanto, é importante observar que o encolhimento proporcional ocorre apenas quando o espaço disponível é menor do que a soma das larguras (ou alturas, dependendo do eixo principal) dos itens flexíveis. Se houver espaço suficiente, os itens não serão encolhidos, independentemente dos valores de flex-shrink.

Consegui ajudar em sua dúvida? Caso positivo, pode marcar a resposta como solucionado por favor?

Caso ainda esteja com dúvidas, é só retornar!

Espero ter ajudado, bons estudos! : )

Olá, Luan. A atividade que fala sobre o flex-shrink é a atividade 07 da aula 5 sim. Ela começa com o seguinte código HTML:

<main class="flexContainer">        
  <div class="flexItem firstRow"></div>
  <div class="flexItem firstRow"></div>
  <div class="flexItem firstRow"></div>
  <div class="flexItem firstRow"></div>
</main>

No seu exemplo, por terem dois itens dentro do container, o primeiro item ocupará 33% da tela e o segundo vai ocupar 66% da tela, certo? Assumindo que os itens precisem ocupar 100% da mesma.

Ainda não entendi completamente por que minhas imagens ficaram todas com o mesmo tamanho ao invés de ter uma com um tamanho menor do que as outras, mas lendo melhor essa sua explicação:

"No entanto, é importante observar que o encolhimento proporcional ocorre apenas quando o espaço disponível é menor do que a soma das larguras (ou alturas, dependendo do eixo principal) dos itens flexíveis. Se houver espaço suficiente, os itens não serão encolhidos, independentemente dos valores de flex-shrink."

Quer dizer que no meu exemplo não tem como somente um dos itens diminuir proporcionalmente? Onde está esse "espaço disponível" na captura de tela que coloquei lá em cima?

Bom dia, Eduardo. Agradeço seu retorno!

Perdão, posso não ter entendido direito, você fez uma adaptação do código do exercício, na atividade 07 da aula 5, certo? Por isso fiquei preocurando o código e não encontrava, bem mais diferente. A atividade desse link: https://cursos.alura.com.br/course/css-flexbox-layouts-responsivos/task/112639

Bom, analisando o código que você adaptou lá no início, analisei alguns pontos que resolvem essa questão do flex-shrink não funcionar:

No próprio print do inspecionar que você enviou lá no início, é possível confirmar que o elemento está com flex-shrink ou não, tem um ponto de exclamação e essa linha de código está com um efeito cinza claro, reparou? Se você passar o mouse por cima, vai aparecer um aviso informando que o item square:first-child não está recebendo o flex-shrink, pois o seu pai direto não é um item flex. O item que está com display flex no exemplo que você enviou é o .flexContainer, que seria o avô dos itens com a classe square. rsrs

Primeiro ajuste que faria, aplicaria o flex-shrink na div pai dessas imagens. Entretanto, vai ser necessário mais um ajuste.

As imagens possuem uma largura e altura estática de 512 pixels, e com isso, quando o container diminuir, as imagens vão sobrepor as divs com flex-shrink. Para resolver isso, aplique "width: 100%" e "height: 100%" nas imagens. Assim elas vão sempre se adaptar à largura e altura da div onde elas estão inseridas, independente do tamanho padrão delas.(essa é uma boa forma de ajustar imagens em um determinado espaço)

E então, você pode testar alterando a largura do container com a classe flexContainer, e conferir como as imagens se ajustam, alterando seu valor de flex-shrink, ficou assim meus ajustes:

<body>
    <main class="flexContainer">        
        <div class="flexItem firstRow"><img class="square" src="./square-512 (1).jpg"></div>
        <div class="flexItem firstRow"><img class="square" src="./square-512 (2).jpg"></div>
        <div class="flexItem firstRow"><img class="square" src="./square-512 (3).jpg"></div>
        <div class="flexItem firstRow"><img class="square" src="./square-512.jpg"></div>
    </main>
</body>

.flexContainer {
    display: flex;
    width: 1300px;
    border: black 1px solid;
}
  
  .flexItem:first-child {
    flex-shrink: 2;
  }

img {
    max-width: 100%;
    height: 100%;
}

Print do resultado com o primeiro item encolhido:

Consegui ajudar dessa vez? Espero que sim! :) E aí é só marcar como solucionado. Caso ainda esteja com dúvida, é só me informar aqui!

Luan, o exercício em si é do curso de "Flexbox: Posicione elementos na tela", como falei lá no primeiro post. É este aqui:

EDIT: Acho que entendi por que você se confundiu. Nesse curso, não tem aquele botão no final da página que direciona o usuário ao fórum. Daí, quando fui tirar uma dúvida, procurei pelas seções e tags certas e o mais próximo foi o outro curso de flexbox. Pode-se dizer que criei um tópico na seção errada, desculpe-me!

Com sua explicação, consegui entender melhor o que aconteceu e realmente o problema foi ter colocado o flex-shrink na classe da imagem quando eu deveria ter colocado na classe da div. Fazendo os testes, uma das imagens ficou menor do que as demais e com isso atingi o objetivo.

Uma outra curiosidade: quando eu deixo de colocar o width no flex-container, a imagem na qual eu coloquei um flex-shrink diminui até desaparecer se eu estiver reduzindo a largura da página. É normal isso acontecer?

De qualquer forma, agradeço por ter esclarecido minhas dúvidas!

Bom dia, Eduardo! Como vai? Peço perdão pela demora no retorno.

Tudo bem! :) É normal ir se acostumando com o fórum, cada atividade dos cursos tem seu próprio tópico no fórum. Então quando tiver uma dúvida em alguma etapa do curso, é só clicar em "discutir no fórum" bem na atividade que surgiu sua dúvida.

Sobre sua dúvida em relação ao flex-shrink, é exatamente isso. O flex-shrink diminui a largura dos componentes conforme a largura do conteiner onde eles estão inseridos também diminui. Pra um elemento encolher ao ponto de ficar vizualmente invisível é porque o container deve ter encolhido demais, pra evitar que isso aconteça, pode colocar min-width no container, assim ele terá um limite máximo para encolher independente da largura da tela.

Tem dois vídeos muito legais da Rafa Balerini, nossa parceira aqui da Alura, onde ela fala sobre cada uma das propriedades do Flexbox, talvez você curta!

Vídeo 1 Vídeo 2 - Nesse ela fala sobre o flex-shrink e flex-grow