Como fixar uma barra lateral de conteúdo periférico no layout

25 de janeiro de 2022 3 respostas Resolvido

User_013 25 de janeiro de 2022

Boa noite,

Estou desenvolvendo um projeto para aprendizado e estou com dificuldades em criar um aside para conteúdo periférico em uma barra lateral conforme meu rascunho a seguir:

Como posso fixar esse aside ao lado do meu main de forma que flua livremente ao rolar a página?

3 Respostas

rodriguesabner 26 de jan. de 2022 1 like

cara, vc pode usar um display: flex, e deixar um do lado do outro

User_013 26 de jan. de 2022

Só de usar display: flex; ele já fica alinhado com o main um do lado do outro?

Solucao aceita

Lucas_Camara 26 de jan. de 2022 1 like

Exatamente, veja:

<!DOCTYPE html>
<html>

<head>
  <style>
    .flex-container {
      display: flex;
      flex-wrap: nowrap;
      background-color: DodgerBlue;
    }

    .flex-container > div {
      background-color: #f1f1f1;
      width: 100%;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <h1>Flexible Boxes</h1>
  
  <div class="flex-container">
    <div>Main</div>
    <div>Menu Lateral</div>
  </div>
</body>

</html>

Faça um teste e troque o display: flex; por display: block;, por exemplo, e veja que a disposição dos elementos será alterado.

FONTE: CSS Flexbox (Flexible Box)

Criado 25 de janeiro de 2022

Ultima resposta 26 de jan. de 2022

Respostas 3

Participantes 3

3 Respostas

Topicos relacionados