Questão de Tecnologia da Informação · FGV TJ-MS 2024 (nº 35)

O Flexbox é uma ferramenta do CSS que nos ajuda a organizar elementos em uma linha ou coluna de forma flexível. Quando um elemento é definido como um "container flex" (`display: flex`), seus filhos se tornam "itens flex" e podem ser controlados em sua ordem e alinhamento.

(A) Incorreta: O código HTML e CSS está sintaticamente correto e utiliza recursos padrão do CSS (Flexbox). Não haverá nenhuma mensagem de erro no console do navegador.
(B) Incorreta: A propriedade `flex-direction: row-reverse;` não apenas alinha os itens à direita, mas também inverte a ordem visual dos elementos dentro do container flex. Portanto, 'Tribunal' não apareceria antes de 'Downloads'.
(C) Correta: A propriedade `display: flex;` transforma o `<nav>` em um container flex. A propriedade `flex-direction: row-reverse;` faz duas coisas: 1) inverte a ordem dos itens (o que era o último no HTML, `Downloads`, se torna o primeiro visualmente, e vice-versa); 2) faz com que os itens comecem a ser dispostos a partir do lado direito do container. Assim, o resultado é 'Downloads | Tribunal' alinhado à direita.
(D) Incorreta: A ordem dos elementos está incorreta devido ao `row-reverse`, e o alinhamento também está incorreto, pois `row-reverse` faz com que os itens comecem da direita.
(E) Incorreta: Embora a ordem 'Downloads|Tribunal' esteja correta devido ao `row-reverse`, o alinhamento está incorreto. `flex-direction: row-reverse;` faz com que os itens sejam dispostos a partir do lado direito do container, não do esquerdo.