Entrar Ainda não tem acesso?
2
respostas

Não consigo alinhar abaixo com Flexbox!

por Leandro Krindges
| 50.2k xp | 5 posts
.

Prezados,

Estou tentando alinhar os itens da nav para que fiquem proximo da parte inferior do meu header, e título h1 centralizado, mas não estou conseguindo. Alguém poderia me dizer o que estou fazendo de errado? Obrigado!

``<!DOCTYPE html>
    <html lang="pt-BR">
<head>
    <title>Página Teste</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">
</head>

<body>
    <header class="cabecalho">
        <h1 class="titulo">Página Teste</h1>
        <nav>
            <ul class="nav__lista">
                <li class="nav__item">Home</li>
                <li class="nav__item">Quem Somos</li>
                <li class="nav__item">Contato</li>
            </ul>
        </nav>
    </header>
</body>
`

E esse é o CSS:

body {
    font-family: Montserrat, sans-serif;
}

header {
    display:  flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:  100%;
    height:  200px;
    background: #b2bec3;
    font-size:  50px;

}

.nav__lista {
    display:  flex;
    margin-top: 15px;
    font-size:  25px;
    flex-direction: row;
    align-items: flex-end: ;
2 respostas
por Vinicius Vieira Braz Laureano
| 143.7k xp | 6 posts
Desenvolvedor JR

Creio que seja isso que você quer:

HTML com NAV fora de HEADER

    <header class="cabecalho">
        <h1 class="titulo">Página Teste</h1>
    </header>
    <nav>
      <ul class="nav__lista">
        <li class="nav__item">Home</li>
        <li class="nav__item">Quem Somos</li>
        <li class="nav__item">Contato</li>
      </ul>
    </nav>

CSS (havia um erro de :** após a palavra **end)

.nav__lista {
    display:  flex;
    margin-top: 15px;
    font-size:  25px;
    flex-direction: row;
    align-items: flex-end;
  }

  .nav_lista ul {
  list-style: none;
  }
por Leandro Krindges
| 50.2k xp | 5 posts
.

Prezado Vinícius! Agradeço a tua atenção. Na verdade o que eu queria era alinha o titulo e o nav no centro da pagina, um em cima do outro, dentro do header. Eu refiz tudo e consegui utilizando o flex-direction: column; .

Valeu mais uma vez!!!

Abraço!