Questão nº 104
Questão de Tecnologia da Informação · FGV CGE-SP 2025 (nº 104)
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. (alternativa correta)
- Edisplay: block no <header>; float: right aplicado ao elemento que ocupa o espaço.
Resposta comentada
Gabarito Alternativa D
Para criar layouts flexíveis na web, o Flexbox é uma ferramenta poderosa do CSS que permite organizar e distribuir itens dentro de um contêiner em uma única dimensão (linha ou coluna), adaptando-se ao espaço disponível.
- (A) Incorreta:
display: gridé para layouts bidimensionais (linhas e colunas), sendo mais complexo para esta necessidade específica de distribuição em uma única linha e crescimento de um item.grid-template-areasé para posicionar itens em áreas nomeadas do grid, não para fazer um item crescer dinamicamente e empurrar outros em um contexto de linha flexível. - (B) Incorreta:
align-items: centercontrola o alinhamento dos itens no eixo transversal (verticalmente, se o layout for em linha), não a distribuição horizontal ou o preenchimento de espaço no eixo principal. - (C) Incorreta: Embora
display: flexseja correto para o<header>,margin-right: autoaplicado a um elemento empurra os elementos subsequentes para a direita, criando um espaço vazio. No entanto, ele não faz com que o próprio elemento que recebe a propriedademargin-right: autoocupe todo o espaço intermediário crescendo, ele apenas cria uma margem. A questão pede que o elemento ocupe o espaço, não apenas que crie uma margem. Armadilha da banca:margin: autoé um truque comum no Flexbox para empurrar elementos, masflex-growé a propriedade específica para fazer um item crescer e preencher o espaço disponível. - (D) Correta:
display: flexno<header>transforma seus filhos em itens flexíveis, permitindo a distribuição horizontal.flex-grow: 1aplicado a um item flexível faz com que ele cresça e ocupe todo o espaço disponível restante no contêiner, empurrando os elementos subsequentes para a direita. Esta é a combinação exata para o cenário descrito: o item cresce para preencher o espaço intermediário e, ao fazer isso, empurra os outros elementos para a direita. - (E) Incorreta:
display: blocknão oferece a flexibilidade necessária para distribuição horizontal e espaçamento dinâmico.float: righté uma técnica de layout mais antiga e menos flexível que retira os elementos do fluxo normal, não sendo adequada para layouts responsivos e para o preenchimento de espaço de forma dinâmica como o Flexbox.
Fonte: FGV CGE-SP 2025 Auditor Estadual de Controle - Tecnologia da Informação (Caderno Tipo 1). Reproduzida para fins de estudo.