Questão nº 11
Questão de Tecnologia da Informação · FGV CVM 2024 (nº 11)
Considere o seguinte trecho de um documento em HyperText Markup Language:
```
<div id="secao1" class="align">
<span class="item"></span>
<span class="item"></span>
</div>
```
Considere o respectivo código de Cascading Style Sheets:
```
.align {
width: 100px;
height: 100px;
display: flex;
flex-direction: row-reverse;
}
.item {
width: 10%;
height: 10%;
border-radius: 50%;
flex-shrink: initial;
background-color: red;
}
```
Na renderização por um navegador web padrão, a largura total ocupada pelo elemento "secao1" e o conteúdo exibido devem ser, respectivamente:
- A100px e círculos dispostos em linha; (alternativa correta)
- B20px e círculos dispostos em coluna;
- C20px e semicírculos dispostos em linha;
- D20px e semicírculos dispostos em coluna;
- E100px e semicírculos dispostos em coluna.
Resposta comentada
Gabarito Alternativa A
CSS Flexbox é uma ferramenta para organizar elementos em uma página web, permitindo que eles se ajustem dinamicamente ao espaço disponível, seja em uma linha (row) ou coluna (column). O container flex (o elemento pai com `display: flex;`) controla a disposição dos seus itens flex (os elementos filhos).
(A) Correta: A largura total do elemento "secao1" é definida explicitamente como `width: 100px;` no CSS do seletor `.align`. Os itens internos (`.item`) têm `width: 10%;` e `height: 10%;` do container (ou seja, 10px por 10px), e `border-radius: 50%;` transforma um quadrado em um círculo. A propriedade `flex-direction: row-reverse;` organiza esses círculos em uma linha, apenas invertendo a ordem de exibição.
(B) Incorreta: A largura total do elemento "secao1" é `100px`, não `20px`. A armadilha aqui é confundir a largura do container (`100px`) com a soma da largura dos itens (`10px + 10px = 20px`). A pergunta é sobre a largura do elemento "secao1" (o container). Além disso, `flex-direction: row-reverse;` organiza os itens em linha, não em coluna.
(C) Incorreta: A largura total do elemento "secao1" é `100px`, não `20px`. `border-radius: 50%;` em um elemento quadrado cria um círculo completo, não um semicírculo.
(D) Incorreta: A largura total do elemento "secao1" é `100px`, não `20px`. `border-radius: 50%;` cria círculos, não semicírculos, e `flex-direction: row-reverse;` organiza os itens em linha, não em coluna.
(E) Incorreta: `border-radius: 50%;` cria círculos, não semicírculos. Além disso, `flex-direction: row-reverse;` organiza os itens em linha, não em coluna.
Fonte: FGV CVM 2024 Analista CVM - TI Sistemas e Desenvolvimento (Perfil 8) (Caderno Tipo 1). Reproduzida para fins de estudo.