FC ConcursosFC Concursos

Questão FC373507

Considere o fragmento de código HTML5, abaixo: <body> <div class="topo"> <div class="logo"> </div> <div class="slogan"></div> </div> </body> Considere, também, o fragmento de códig

Desenvolvimento Web

FCC · 2021

Considere o fragmento de código HTML5, abaixo:

 

<body>

   <div class="topo">

     <div class="logo">

     </div> <div class="slogan"></div>

   </div>

</body>

 

Considere, também, o fragmento de código CSS, abaixo, para o código HTML5 apresentado.

 

div.topo{width:100%;height:150px;background-color:yellow; ...I... }

div.logo{background-color:blue; flex:1}

div.slogan{background-color:green; flex:1}

 

Para que as divisões logo e slogan apareçam uma do lado da outra, com tamanhos iguais, preenchendo toda a divisão topo, a lacuna I deve ser corretamente preenchida por

  1. display:inline
  2. float:left
  3. display:flex
  4. position:relative
  5. display:block
Mostrar resposta e comentário

Gabarito

Certo

Comentário do professor

display:flex transforma a div.topo em um flex container, fazendo com que seus filhos diretos sejam automaticamente flex items.

Por padrão o fluxo do Flexbox é em linha (flex-direction: row), então as divs logo e slogan ficam lado a lado sem precisar de floats ou posicionamentos adicionais.

O uso de flex:1 em cada filho indica que ambos devem crescer igualmente para preencher o espaço disponível. Assim, cada uma ocupará metade da largura da topo, respeitando a altura definida.

Em resumo: aplicar display:flex na container é o passo necessário para que os itens fiquem alinhados em linha e, com flex:1 em cada um, tenham tamanhos iguais e preencham todo o espaço.

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

Continue aprendendo