Entrar Ainda não tem acesso?
2
respostas

[Reclamação] Exercício 5 - Flexbox: Centralização vertical

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Posicionando mais elementos e atividade Lista de exercícios

por Agostino Pasta
| 25.2k xp | 39 posts

Olá, a solução proposta para o exercício sugere

  • *Acesse o arquivo CSS e selecione o container usando .container { ... }.
  • *Adicione display: flex; para ativar o Flexbox.
  • *Utilize align-items: center; para centralizar os itens verticalmente no container.
  • *Verifique o resultado no navegador para assegurar que o alinhamento esteja correto.

Mas o CSS providenciado já é

.container {
  display: flex;
  align-items: center;
  height: 300px; /* Altura ajustável conforme necessário */
}

e não centraliza verticalmente.

Para centralizar verticalmente, modifiquei o CSS da seguinte forma

.container {
  display: flex;
  align-items: center;
  height: 300px; /* Altura ajustável conforme necessário */
  flex-direction: column /* Parâmetro alterado */;
}

Estou correto?

2 respostas
por NATHALIA QUEIROZ
| 4302.3k xp | 9702 posts
Alura Scuba Team

Ei, Agostino, tudo bem?

Está bem encaminhado. No Flexbox, o align-items: center; centraliza os itens ao longo do eixo transversal (o eixo perpendicular à direção principal).

Então se usar o flex-direction: column;, a direção principal é vertical, então o eixo transversal torna-se horizontal. Nesse caso, align-items: center; centraliza os itens horizontalmente.

E se usar o flex-direction: row;, a direção principal é horizontal, tornando o eixo transversal vertical. Aqui,align-items: center; centraliza os itens verticalmente.

Podemos dizer que nesse caso, sua alteração muda o comportamento, mas não é o que resolve a centralização vertical em si. Se não estava funcionando no seu teste, pode ter sido por outro detalhe da estrutura HTML ou do contexto do container.

Agradeço por trazer esse ponto, com certeza ajudará aos demais colegas que estão estudando o mesmo conteúdo.

Bons estudos e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado
por Agostino Pasta
| 25.2k xp | 39 posts

Oi Nathalia, usei o trecho de html providenciado no excercício, apenas incapsulando-o dentro das tags obrigatórias

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="02.09.05.css">
</head>

<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <!-- Mais itens aqui -->
    </div>
</body>

</html>

Lembrando que o trecho do exercício era 

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- Mais itens aqui -->
</div>

Usando o css providenciado

.container {
  display: flex;
  align-items: center;
  height: 300px; /* Altura ajustável conforme necessário */
}

o resultado é o seguinte
solução proposta pelo instrutor, texto centralizado horizontalmente
Com o css que eu coloquei 

.container {
  display: flex;
  align-items: center;
  height: 300px; /* Altura ajustável conforme necessário */
  flex-direction: column;
}

O resultado fica
visualização usando o css alterado por mim

Por isso, meu entendimento é que a solução proposta não esteja correta.

Obrigado

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA