FC ConcursosFC Concursos

Questão FC266305

Considere o seguinte trecho de código HTML e CSS: <!DOCTYPE html> <html> <head> <style> .container ( width: 100%; display: flex; justify-content: space-between; } .box { width: 200

Questões sem classificação de assunto (TI - Desenvolvimento de Sistemas)

IDECAN · 2024

Considere o seguinte trecho de código HTML e CSS:

 

<!DOCTYPE html>
<html>
<head>
      <style>
           .container (
                 width: 100%;
                display: flex;
                justify-content: space-between;
         }
        .box {
                width: 200px;
                height: 150px;
         }
         #special-box {
               width: 300px;
        }
   </style>
</head>
<body>
     <div class="container">
      <div class="box"></div>
     <div class="box"></div>
      <div class="box"></div>
   </div>
</body>
</html>

 

Com base no código acima, assinale a afirmação correta sobre o layout resultante.

  1. A propriedade justify-content: space-between não terá efeito, pois a largura dos elementos é fixa.
  2. Todos os elementos com a classe box terão a mesma largura, pois a regra de classe aplica-se a todos os elementos de forma uniforme.
  3. O elemento com o id special-box terá uma largura maior do que os outros elementos com a classe box, pois a regra do id tem mais prioridade do que a regra de classe.
  4. O elemento com o id special-box será exibido com largura de 200px, porque a classe box tem prioridade sobre o id.
  5. O layout dos elementos dentro de .container será uma coluna vertical, com os elementos empilhados um sobre o outro.
Mostrar resposta e comentário

Gabarito

A

Comentário do professor

A afirmação está correta porque justify-content: space-between só age sobre o espaço livre que sobra no contêiner flexível para distribuir entre os itens.

No código há três elementos com classe box de 200px cada, portanto o total ocupável é \(3\times200=600\)px. A regra do contêiner define width: 100%, ou seja, a largura do contêiner depende da largura da janela. Se essa largura for igual ou menor ao somatório fixo dos itens, não haverá espaço sobrando para o space-between distribuir, e o comportamento parecerá sem efeito.

Além disso, existe uma regra para #special-box que não aparece no HTML, logo não altera a soma das larguras. Em resumo: com larguras fixas dos itens e nenhum espaço livre no contêiner, justify-content: space-between não produzirá gaps entre os boxes.

Conteúdo do catálogo FC Concursos · Atualizado em

Continue aprendendo