1
resposta

Usei as proporções de viewport para resolver

Não consegui o resultado no layout, exatamente como estava na imagem, com os códigos da videoaula. Consegui, entretanto, com os códigos abaixo, sem necessidade de mexer no style.css:

.conteudoPrincipal-cursos {
  display: flex;
  flex-wrap: wrap;
}

.conteudoPrincipal-cursos-link {
  max-width: 20vw;
  width: 19vw;
  flex-grow: 1;
  margin: 0.5vw 0.5vw 0.5vw 0.5vw !important;
}

Caso seja necessário usar valores inteiros na propriedade margin, basta reduzir também um ponto inteiro das propriedades max-width e width:

.conteudoPrincipal-cursos {
  display: flex;
  flex-wrap: wrap;
}

.conteudoPrincipal-cursos-link {
  max-width: 19vw;
  width: 18vw;
  flex-grow: 1;
  margin: 1vw 1vw 1vw 1vw !important;
}

Viewport é o tamanho efetivo da janela do navegador e vw é o percentual dessa medida (vh é a altura, mesma lógica).

Como fugimos um pouco do flexbox por uma simples limitação da propriedade, achei que não seria danoso usar outra forma de resolver, desde que fugindo de pixels arbitrários.

Posso considerar a solução correta?

Obrigado!

1 resposta

Glauco, boa tarde!

Pode considerar sim! Uma coisa que vale a pena ser notado é que o VW é referente ao tamanho absoluto da janela, dependendo do dispositivo pode ser que você não queira que ele tenha 20% do tamanho da tela

Mas não está errado, é como falamos: existem várias formas de resolver o mesmo problema, tente testar em outros navegadores e resoluções para ver o compartamento.

Continue assim 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