Questão de Programação — HTML (HyperText Markup Language) — FGV 2024
Programação›HTML (HyperText Markup Language)
Código
fg098591
Banca
FGV
Órgão
TJ-MS
Ano
2024
Nível
Superior
Cargo
Técnico de Nível Superior - Analista de Sistemas Computacionais - Web Designer
Considere o seguinte trecho de um documento em HyperText Markup Language:<nav id="layout1" class="layout1"><a href="/tribunal/">Tribunal</a> |<a href="/downloads/">Downloads</a></nav>Considere também o respectivo código de Cascading Style Sheets:#layout1 {display: flex;flex-direction: row-reverse;}a { flex-shrink: initial; }Ao ser renderizado por um navegador web padrão, o código HTML com a folha de estilo CSS acima exibe:
Auma mensagem de erro no console;
B‘Tribunal|Downloads’ alinhado à direita;
C‘Downloads|Tribunal’ alinhado à direita;
D‘Tribunal|Downloads’ alinhado à esquerda;
E‘Downloads|Tribunal’ alinhado à esquerda.
Revelar gabarito e comentário▾
GabaritoC — ‘Downloads|Tribunal’ alinhado à direita;
Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.
CSS Flexbox: flex-direction: row-reverse
Gabarito: letra C. A propriedade flex-direction: row-reverse inverte a ordem dos itens flexíveis e também inverte o eixo principal: o início passa a ser na borda direita do container. Como o nav não possui justify-content definido, o valor padrão é flex-start, que alinha os itens no início do eixo — ou seja, no canto direito. A ordem dos <a> no HTML é 'Tribunal' então 'Downloads', mas com row-reverse a ordem visual será 'Downloads' depois 'Tribunal', resultando em Downloads|Tribunal alinhado à direita.
A questão testa o comportamento do flexbox, especialmente como row-reverse afeta a ordem e o alinhamento. O CSS aplicado ao #layout1 define display: flex e flex-direction: row-reverse. Os elementos <a> são itens flexíveis. A propriedade flex-shrink: initial nos <a> não interfere no alinhamento ou ordem.
1Container flex (nav)
2Eixo principal invertido
3Início do eixo = borda direita
4Itens em ordem inversa
5Downloads | Tribunal
6Alinhado à direita
LEVEL · soulevel.com.br
Alternativa A — ❌ Incorreta
Não há erro no código HTML ou CSS. O navegador renderiza normalmente sem mensagens de erro no console.
Alternativa B — ❌ Incorreta
A ordem inversa (row-reverse) faz com que o segundo link apareça primeiro, então 'Tribunal|Downloads' não seria exibido. Além disso, o alinhamento à direita ocorreria, mas a ordem está trocada.
Alternativa C — ✅ Correta ⟵ GABARITO
Conforme explicado: row-reverse inverte a ordem e o início do eixo principal fica à direita. Os itens são posicionados do fim para o início, logo o texto exibido é 'Downloads|Tribunal' alinhado à direita.
Alternativa D — ❌ Incorreta
Se não houvesse flex-direction: row-reverse, a ordem seria 'Tribunal|Downloads' e o alinhamento padrão seria à esquerda (com justify-content: flex-start). Mas a propriedade modificou a ordem e o eixo.
Alternativa E — ❌ Incorreta
Embora a ordem 'Downloads|Tribunal' esteja correta (por causa da inversão), o alinhamento não é à esquerda. Com row-reverse, o início do eixo é a borda direita, então os itens ficam alinhados à direita.
NÃO CAIA NESSA!
A banca explora a confusão entre inverter apenas a ordem (como direction: rtl faria) e o comportamento completo do row-reverse, que também desloca o ponto de partida do eixo principal para o lado direito. Muitos candidatos pensam que row-reverse só troca a ordem, mantendo o alinhamento à esquerda (alternativa E). Na verdade, o alinhamento acompanha a inversão do eixo.
PEGA ESSA DICA!
Decore o padrão: flex-direction: row-reverse e column-reverse invertem a ordem dos itens E trocam o início do eixo principal. O valor padrão de justify-content é flex-start, que alinha no início do eixo. Simule mentalmente: se o eixo vai da direita para a esquerda, o início é a direita. Portanto, os itens ficam encostados na borda direita.