Auditor de Contas Públicas - Auditoria de Tecnologia da Informação
Considere o seguinte trecho de código de uma página web:<div id="opcoes" class="vert"><div class="item">Contratos</div><div class="item">Convênios</div><div class="item">Licitações</div></div>E o respectivo código de Cascading Style Sheets:.vert {display: flex;width: max-content;}.item {flex: auto;width: 110px;}Ao ser renderizado por um navegador web padrão, o elemento com id “opcoes” do código acima exibe três elementos div:
Adispostos em linha, com largura total igual a 330px
Bdispostos em coluna, com largura total igual a 110px;
Cdispostos em linha, com largura total menor ou igual a 330px;
Ddispostos em coluna, com largura total menor ou igual a 110px;
Edispostos em coluna, com largura total maior ou igual a 110px.
Revelar gabarito e comentário▾
GabaritoA — dispostos em linha, com largura total igual a 330px
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”.
Flexbox com largura fixa
Gabarito: letra A. Os elementos filhos de .vert estão dispostos em linha (padrão do flexbox) e cada um tem largura de 110px. Como o contêiner pai possui width: max-content, ele se ajusta exatamente ao conteúdo, resultando em 3 × 110px = 330px.
A propriedade display: flex no elemento .vert faz com que os filhos se alinhem em uma linha (row), a menos que flex-direction: column seja aplicado – o que não ocorre. Cada .item tem width: 110px e flex: auto, que equivale a flex: 1 1 auto. Isso permite que o item cresça se houver espaço, mas, como a largura está explicitamente definida e o contêiner pai não possui restrição de largura (apenas max-content), os itens não precisam encolher. Portanto, a largura total do contêiner será exatamente a soma das larguras dos três itens: 330px.
Alternativa A — ✅ Correta ⟵ GABARITO
Dispostos em linha, com largura total igual a 330px. Esse é o resultado direto da combinação de display: flex (linha) e width: 110px em cada item.
Alternativa B — ❌ Incorreta
Afirma que os elementos estão em coluna. O flex-direction padrão é row, não column. Para empilhar verticalmente, seria necessário flex-direction: column.
Alternativa C — ❌ Incorreta
Diz que estão em linha com largura menor ou igual a 330px. Embora a largura seja igual (satisfazendo a condição), a alternativa não reflete o valor exato. A banca pede precisão: a largura é exatamente 330px, não menor.
Alternativa D — ❌ Incorreta
Novamente sugere disposição em coluna, o que não ocorre.
Alternativa E — ❌ Incorreta
Também afirma coluna e ainda menciona largura maior ou igual a 110px, o que não condiz com a realidade (largura total é 330px, não 110px).
PEGA ESSA DICA!
Lembre-se de que display: flex sem flex-direction explícito equivale a flex-direction: row. Para coluna, use flex-direction: column. Além disso, com width fixa nos itens, a soma direta dá a largura total do contêiner quando não há margens ou gap.