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

Explicação / motivo de utilização do layout Flex/Flexbox, e como ficaria (se possível/viável) considerando Grid Layout

Olá pessoal!

Vocês poderiam explicar:

  • as propriedades do layout Flexbox utilizadas nesta aula (display: flex, flex-wrap: wrap, etc) (não encontrei a explicação nos vídeos nem nas transcrições desta aula);
  • o motivo de sua utilização, porque não foi utilizado o Grid Layout;
  • como ficaria o código substituindo flex por grid (se viável, do contrário favor explicar o motivo);

Obs: não fiz o curso de Flexbox porque não está como pré-requisito deste curso.

Ah, o arquivo correspondente é o assets/css/destaques.css do código desta aula no Github.

Atenciosamente, Elías.

3 respostas
solução!

Fala aí Elías, tudo bem? Vamos lá, vou tentar:

as propriedades do layout Flexbox utilizadas nesta aula (display: flex, flex-wrap: wrap, etc) (não encontrei a explicação nos vídeos nem nas transcrições desta aula);

  • display: flex: Vai transformar nossa Box em FlexBox, para que possamos utilizar as funcionalidades do FlexBox.
  • flex-wrap: wrap: Essa propriedade faz com que os elementos quebrem em novas linhas quando não couberem na mesma linha, exemplo:

Imagine uma linha com quatro caixas, cada uma com 25%, e um espaçamento externo de 30px, conforme a tela via diminuindo, eles vão ficar expremidos, com essa propriedade, eles vão quebrar em linhas.

o motivo de sua utilização, porque não foi utilizado o Grid Layout;

O motivo de usar FlexBox foi para mostrar que Grid Layout e FlexBox podem trabalhar juntos, muitas pessoas confundem achando que eles fazem a mesma coisa.

como ficaria o código substituindo flex por grid (se viável, do contrário favor explicar o motivo)

Basicamente trocaríamos o FlexBox por grid-template-areas e posicionaríamos os elementos em cada area, assim como foi feito nas demais partes.

Obs: Realmente, talvez faça sentido o curso de FlexBox ser obrigatório para esse, vou adicionar.

Espero ter ajudado.

Olá Matheus!

Ajudou sim, muito obrigado pelos esclarecimentos.

Atenciosamente.

Magina, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

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