Quiz 12 - Introdução

1. O que é o CSS Flexbox?

Uma forma de criar animações 3D

Uma ferramenta para editar imagens no navegador

Um modelo de layout para alinhar e distribuir espaço entre itens

Uma linguagem de programação nova *Explicação: Flexbox (Flexible Box Layout) é um sistema de layout unidimensional para alinhar itens em linha ou coluna.*

2. Qual propriedade ativa o modo Flexbox em um elemento pai?

`position: flex;`

`layout: flexbox;`

`display: flex;`

`align: items;` *Explicação: Ao definir `display: flex`, o elemento torna-se um Flex Container.*

3. Para que serve a propriedade `justify-content`?

Para mudar a cor do texto

Para alinhar itens verticalmente

Para alinhar os itens flexíveis ao longo do eixo principal (geralmente horizontal)

Para aumentar o tamanho da borda *Explicação: O `justify-content` controla o espaçamento e alinhamento horizontal dos itens.*

4. Qual valor de `justify-content` distribui os itens com espaço igual **entre** eles, encostando o primeiro e o último nas bordas?

`space-around`

`center`

`space-between`

`flex-start` *Explicação: `space-between` cria vãos iguais apenas entre os itens internos.*

5. Qual propriedade é usada para alinhar os itens verticalmente (eixo secundário) dentro de um container flex?

`vertical-align`

`align-items`

`justify-items`

`flex-align` *Explicação: `align-items` controla o posicionamento dos itens no eixo oposto ao de direção.*

6. O que acontece se utilizarmos `flex-direction: column;`?

Os itens somem da tela

Os itens passam a ser empilhados verticalmente (um abaixo do outro)

Os itens ficam um ao lado do outro

O site fica de cabeça para baixo *Explicação: O `flex-direction` define o eixo principal; `column` o torna vertical.*

7. Para que serve a propriedade `flex-wrap: wrap;`?

Para esconder os itens que não cabem na tela

Para diminuir o tamanho dos itens automaticamente

Para permitir que os itens pulem para uma nova linha caso não haja espaço suficiente na atual

Para criar um contorno ao redor dos itens *Explicação: Sem o `wrap`, os itens tentam se "esmagar" em uma única linha.*

8. Qual a função de `justify-content: center;` e `align-items: center;` usados juntos?

Alinhar o texto à esquerda

Centralizar perfeitamente um elemento tanto horizontalmente quanto verticalmente

Esticar o elemento por toda a página

Criar quatro colunas iguais *Explicação: Essa é a forma mais simples e moderna de centralizar conteúdo no CSS.*

9. No Flexbox, quem são os "Flex Items"?

Todos os elementos do site

Apenas os filhos diretos de um elemento que tenha `display: flex`

Apenas as imagens e botões

Somente os textos dentro de parágrafos *Explicação: Somente os descendentes imediatos do container flex tornam-se flexíveis.*

10. O valor `space-around` no `justify-content` faz o quê?

Coloca todo o espaço no final da linha

Distribui espaço igual ao redor de cada item individualmente

Junta todos os itens no centro

Remove todo o espaço extra *Explicação: O `space-around` garante que haja espaço nas bordas e entre os itens.*