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

Resposta - flex-grow

O espaço vazio é de 600px, sendo assim o mesmo vai ser dividido em 2 partes (soma de quantidade de flex-grow) e dividido para os dois itens igualmente, pois possuem o mesmo valor de flex-grow. Logo os dois itens terão tamanho de 200px+300px=500px

4 respostas
solução!

Oi Amanda, tudo bem?

Muito obrigada por compartilhar com a gente a sua resposta. Parabéns por praticar :D

Continue os bons estudos.

Um abraço.

Prezados,

Não entendi pq o Flex-grow acabou mudando o aspecto do I-frame. O Ifram-e do vídeo original era quandrado, mas virou um retangulo, quando foi aplicado o flex-grow. Pq isso acontece?

Bom dia galera! Em relação ao espaço vazio apresentado pela colega Amanda, foi um pouco mais fácil de compreender pelo fato de ser uma distribuição justa do restante (600px) entre os demais que já tinham cada um 200px, ou seja, cada um dos dois ganharam metade desses 600px, então somando com seus 200px cada um ficou com 500px. Que bom que aos poucos vamos entendendo a funcionalidade dos códigos e avançando nos cursos!

Essa conta realmente foi muito facil, porém, gostaria de fazer uma pergunta. Porque o flexbox mudou o aspecto do Iframe. Foi só aplicar o flex grow que a aparencia do elemento mudou completamente: ele ficou achatado e esticado. Será que foi alguma coisa no meu código? Poderiam me ajudar com essa dúvida? Acredito que isso não deveria acontecer porque não se deve mudar a forma a forma que foi defindida no protótipo. Alguém mais percebeu isso "Vantagens e vídeo"? Segue as imagens:

Elemento sem flex-grow

Elemento com flex-grow

Ao meu ver nesse caso, seria necessario também altera a altura da DIV que envolve o Iframe e o texto "vantagens do alurinha"

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software