Questão de Programação — Programação de front end — FGV 2025
Programação›Programação de front end
Código
fg106589
Banca
FGV
Órgão
CGE-SP
Ano
2025
Nível
Superior
Cargo
Auditor Estadual de Controle - Tecnologia da Informação - tarde
Ao estilizar um website responsivo, o desenvolvedor precisa de flexibilidade no layout, garantindo que o cabeçalho (<header> ) ocupe toda a largura disponível e que seus itens internos (logotipo, menu e barra de busca) sejam distribuídos horizontalmente com espaçamento igual entre eles. Além disso, o logotipo deve permanecer fixo no canto esquerdo, enquanto o menu e a barra de busca devem se alinhar à direita, ocupando o espaço restante.
Assinale a opção que indica a combinação de propriedades CSS mais adequada para alcançar a distribuição horizontal flexível e o espaçamento igual dentro do <header> , e o valor da propriedade que deve ser aplicado ao item de menu ou barra de busca para que ele ocupe todo o espaço intermediário, empurrando o restante dos elementos para a direita.
Adisplay: grid no <header>; grid-template-areas no elemento que ocupa o espaço.
Bdisplay: flex no <header>; align-items: center no elemento que ocupa o espaço.
Cdisplay: flex no <header>; margin-right: auto aplicado ao elemento que deve empurrar o restante.
Ddisplay: flex no <header>; flex-grow: 1 aplicado ao elemento que deve ocupar o espaço intermediário.
Edisplay: block no <header>; float: right aplicado ao elemento que ocupa o espaço.
Revelar gabarito e comentário▾
GabaritoD — display: flex no <header>; flex-grow: 1 aplicado ao elemento que deve ocupar o espaço intermediário.
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”.
Layout Flexível com Flexbox – Distribuição Horizontal
Gabarito: letra D. Para que o cabeçalho ocupe toda a largura e os itens sejam distribuídos horizontalmente com o logotipo fixo à esquerda e os demais itens alinhados à direita (ocupando o espaço restante), a combinação mais adequada é usar display: flex no <header> e aplicar flex-grow: 1 ao elemento que deve expandir e ocupar o espaço intermediário (por exemplo, o menu ou uma barra de busca). O flex-grow faz com que o elemento cresça proporcionalmente para preencher o espaço disponível no contêiner flex, empurrando os itens seguintes para a direita.
A questão testa o conhecimento das propriedades do Flexbox para criar layouts responsivos de forma simples e eficiente. Vamos analisar cada alternativa:
Alternativa
Propriedade no <header>
Propriedade no elemento
Efeito no layout
Correta?
A
display: grid
grid-template-areas
Define áreas nomeadas, mas não expande dinamicamente o item intermediário
❌
B
display: flex
align-items: center
Controla alinhamento vertical, não distribuição horizontal
❌
C
display: flex
margin-right: auto
Cria espaço à direita do item, mas não expande o próprio elemento
❌
D
display: flex
flex-grow: 1
Faz o elemento crescer para ocupar o espaço restante horizontalmente
✅
E
display: block
float: right
Remove do fluxo normal, não adequado para distribuição flexível
❌
1display: flex no header
2flex-grow: 1 no item intermediário
3Itens à direita ocupam espaço restante
LEVEL · soulevel.com.br
Alternativa A — ❌ Incorreta
display: grid no <header> com grid-template-areas no elemento. O Grid CSS também permite criar layouts complexos, mas para distribuir itens horizontalmente com espaçamento igual e permitir que um elemento ocupe o espaço restante, seria necessário definir as colunas do grid (ex.: grid-template-columns: auto 1fr auto), e não uma propriedade aplicada diretamente ao item. Além disso, grid-template-areas é usada para nomear áreas, não para ocupar espaço de forma dinâmica. Não é a solução mais direta.
Alternativa B — ❌ Incorreta
display: flex no <header> e align-items: center no elemento que ocupa o espaço. align-items controla o alinhamento vertical dos itens no eixo transversal (centro, início, fim, etc.), não a distribuição horizontal. Não resolve o problema de ocupar o espaço intermediário horizontalmente.
Alternativa C — ❌ Incorreta
display: flex no <header> e margin-right: auto aplicado ao elemento que deve empurrar o restante. Se aplicado a um item do flex, margin-right: auto cria um espaço extra à direita desse item, empurrando os itens seguintes para a direita. Porém, o item em si não se expande – apenas seu espaço de margem aumenta, deixando o item com sua largura original. Para “ocupar todo o espaço intermediário” com o próprio elemento, o correto é usar flex-grow, não margin-right: auto. Essa é uma pegadinha comum: margin: auto em flex alinha itens, mas não faz o elemento crescer.
Alternativa D — ✅ Correta ⟵ GABARITO
display: flex no <header> e flex-grow: 1 aplicado ao elemento que deve ocupar o espaço intermediário (por exemplo, o menu ou a barra de busca). flex-grow define a capacidade de um item flex de crescer em relação aos outros itens para preencher o espaço disponível. Com flex-grow: 1, o elemento se expandirá para ocupar todo o espaço restante, empurrando os itens seguintes para a direita. É a maneira mais direta e flexível.
Alternativa E — ❌ Incorreta
display: block no <header> e float: right aplicado ao elemento. Essa abordagem é antiquada e não fornece a flexibilidade necessária para um layout responsivo. Com float, os elementos saem do fluxo normal, exigindo limpeza de floats e não oferecendo controle fino sobre espaçamento e alinhamento. Não é a opção mais adequada.
PEGA ESSA DICA!
No Flexbox, lembre-se:
justify-content controla a distribuição horizontal dos itens.
align-items controla o alinhamento vertical.
flex-grow faz um item crescer para preencher espaço disponível.
margin: auto em um item flex pode alinhá-lo, mas não o expande.
Para a situação descrita, poderíamos também usar justify-content: space-between no contêiner para distribuir os itens com espaço igual entre eles, mas o foco da questão era o item que ocupa o espaço intermediário, o que exige flex-grow.