0

Olá, eu estou tentando programar um site que utiliza 3 caixas verticais centralizadas na tela,porém quando tento criar as caixas pelo display flex, elas simplesmente não funcionam, eu ja tentei de tudo e nada funciona. alguém poderia me ajudar ? segue abaixo o codigo da pagina

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Site Teste</title>

  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>
  <div class="container">

  <div class="box Sedans">
  <h2>Sedans</h2> 
  <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city 
    or on your next road trip.</p>
   </div>

<div class="box SUVs">
  <h3>SUVs</h3>

  <p>An SUV for its spacious interior, power, and versatility. Perfect for your next family vacation 
    and off-road adventures.</p> 
  </div>

<div class="box Luxury">
  <h4>Luxury</h4>

  <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury 
    rental and arrive in style.</p>
  </div>
</div>
</body>
</html>

aqui abaixo o codigo do CSS

.container{
display: flex;
flex-direction: column;
}

.box{
width: 80px;
height: 80px;
margin-bottom: 20px;
}

.Sedans {
    background-color: blue;
}

.Suvs{
    background-color: aqua;
}

.Luxury{
    background-color: black;
}
2
  • Olá Carlos. O que tu queres dizer com simplesmente não funcionam? Há alguma mensagem de erro? Há um comportamento inesperado? Tu poderias descrever? Commented 24/03/2022 às 20:54
  • eu esperava o comportamento de criar uma caixa separada para cada div com a background-color que coloquei no css
    – Carlos
    Commented 25/03/2022 às 20:31

2 Respostas 2

0

quando voce usa o flex-direction: column, ele inverte os eixos, ou seja se voce não está conseguindo por eles ao centro pode ser que tenha que por um align-item:center; e ele irá centralizar no eixo Y e utilize o justifi-content:center, e ele ajustará ao eixo X

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 24/03/2022 às 23:54
-2

inserir a descrição da imagem aqui

creio que tenhas que tirar o class box para uma div por cima!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .