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

Front-end
, , , ,
#1

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:

1db8edf8c6d1462da8c0f4482c1af857-0001 (1)
1db8edf8c6d1462da8c0f4482c1af857-0001 (1)4371×4618 327 KB

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

#2

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

1 curtida
#3

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

#4

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)

1 curtida