Entrar Ainda não tem acesso?
2
respostas

Display flex

por Geovana Da Silva
| 37.2k xp | 10 posts

Simplesmente o display flex não esta funcionando não sei o pq. Alguém me explicar?


<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
  <title>document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="container">
      <img src="./assets/images/image-omelette.jpeg" alt="Imagem de um omelette">
      <h1> Simpls Omelette</h1>

  </main>
 
</body>
</html>


*{
    padding: 0px;
    margin: 0px;
}
body{
    box-sizing: border-box;
    background-color: var(--eggshell);
}

.container{
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 40%;
    padding: 40px;
    margin: 5% 0%;
    border-radius: 25px;
}
.container img {
    width: 100%;
    border-radius: 15px;

}
2 respostas
por Jhonatan Siqueira Pereira
| 27.7k xp | 4 posts
Analista de Sistemas Jr.

Olá, tudo bem?!

Dei uma olhada no seu CSS e percebi que você está atribuindo o 'Display: flex' direto na classe '.container' que está dentro do body. Dessa forma o Body está fixo com 'Display: Block' padrão, não permitindo o flex do container funcionar corretamente.

Experimenta atribuir os atributos de display flex direto no body!! Segue exemplo:

*{
    padding: 0px;
    margin: 0px;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    background-color: var(--eggshell);
}

.container{
    background-color: var(--white);
    width: 40%;
    padding: 40px;
    margin: 5% 0%;
    border-radius: 25px;
}
.container img {
    width: 100%;
    border-radius: 15px;

}
por Paulo Afonso de Souza Barbosa
| 80.1k xp | 27 posts

Olá, tudo bem? Como seria o resultado final que você está buscando? Pelo código acima o flex está funcionando normalmente...

O width: 100%; no .container img { que está quebrando o layout se caso a sua ideia for deixar ambos em blocos em cima do outro.