Questão de Programação — Linguagens de marcação — FUNDATEC 2026

Flexbox: ordem de renderização e propriedade order

Gabarito: letra D. A disposição visual, da esquerda para a direita, será Lateral, Topo, Conteúdo Principal (vermelho) — exatamente o que a alternativa D afirma. Isso ocorre porque, embora a ordem no HTML seja Topo, Conteúdo Principal e Lateral, a propriedade order do Flexbox redefine a ordem de exibição dos itens dentro do contêiner flex, e o código da figura aplica essa propriedade com valores que colocam a Lateral em primeiro lugar, o Topo em segundo e o Conteúdo Principal em terceiro.

O Flexbox (Flexible Box Layout) é um módulo de layout do CSS que organiza os elementos em uma única dimensão — linha (row) ou coluna (column) — distribuindo o espaço disponível de forma flexível. A propriedade order é uma das mais importantes desse módulo: ela define a ordem em que os itens flex são exibidos, independentemente da ordem em que aparecem no código HTML. Por padrão, todos os itens têm order: 0, e a exibição segue a ordem do documento. Quando você atribui valores diferentes, os itens são reorganizados do menor para o maior valor de order.

Na prática, imagine um contêiner flex com três filhos: <header> (Topo), <main> (Conteúdo Principal) e <aside> (Lateral). No HTML, a ordem natural seria Topo, Conteúdo, Lateral. Mas se o CSS definir order: 2 para o Topo, order: 3 para o Conteúdo e order: 1 para a Lateral, o navegador reordena a exibição para: Lateral (1), Topo (2), Conteúdo (3). É exatamente esse o cenário da questão: a figura mostra os valores de order que produzem a sequência Lateral → Topo → Conteúdo Principal.

A pegadinha clássica aqui é confundir a ordem no código-fonte com a ordem visual. O candidato que lê o HTML e responde "Topo, Conteúdo, Lateral" (alternativa C) ignora a propriedade order. A banca explora justamente essa confusão: o Flexbox permite que a ordem visual seja completamente diferente da ordem estrutural, e a propriedade order é o mecanismo que viabiliza isso. Guarde a regra: a ordem visual no Flexbox é determinada pelo valor de order, não pela sequência dos elementos no HTML — é esse o critério que separa as alternativas.

Alternativa A — ❌ Incorreta

Afirma que a ordem visual é Conteúdo Principal, Topo, Lateral. Isso corresponderia a order com valores crescentes nessa sequência (Conteúdo = 1, Topo = 2, Lateral = 3), o que não é o que a figura mostra. A alternativa inverte completamente a ordem produzida pelos valores de order do código.

Alternativa B — ❌ Incorreta

Afirma que a ordem é Conteúdo Principal, Lateral, Topo. Isso exigiria order com Conteúdo = 1, Lateral = 2, Topo = 3. Novamente, não corresponde aos valores da figura, que colocam a Lateral em primeiro lugar. A alternativa erra ao não considerar que a Lateral tem o menor valor de order.

Alternativa C — ❌ Incorreta

Afirma que a ordem é Topo, Conteúdo Principal, Lateral. Essa seria a ordem natural do HTML, sem a aplicação da propriedade order. É a pegadinha central da questão: o candidato que ignora o Flexbox e responde pela ordem do código-fonte cai aqui. A figura, porém, mostra valores de order que reordenam os elementos, colocando a Lateral em primeiro.

Alternativa D — ✅ Correta ⟵ GABARITO

Afirma que a ordem é Lateral, Topo, Conteúdo Principal. É exatamente o que a propriedade order produz: a Lateral tem o menor valor (1), o Topo o segundo (2) e o Conteúdo Principal o maior (3). O Flexbox exibe os itens do menor para o maior valor de order, da esquerda para a direita no eixo principal (row). A alternativa espelha corretamente o efeito da propriedade.

Alternativa E — ❌ Incorreta

Afirma que a ordem é Lateral, Conteúdo Principal, Topo. Isso exigiria order com Lateral = 1, Conteúdo = 2, Topo = 3. A figura, porém, atribui ao Topo um valor menor que ao Conteúdo Principal, então o Topo aparece antes. A alternativa troca a posição relativa entre Topo e Conteúdo Principal.

Gabarito: letra D