Как правильно позиционировать элементы на flexbox?

Question

[Giunai]

Здравствуйте, у меня есть такое задание(картинку прикрепляю). Нужно сверстать этот шаблон на flexbox. Вопрос, как сделать чтоб посередине было пространство а по бокам эти сайдбары? Просто у меня всё лезет друг на друга и не получается..

Comments

[hypero]

https://codepen.io/dexter1996/pen/ZEWaPqW

[Andrei1penguin1]

Задать ширину flex-элементам

[Giunai]

hypero, спасибо

Answer 1

[Steppp]

<header></header>
<div>
  <div class="navidation"></div >
  <main></main>
  <aside></aside>
</div>
<footer></footer>

Answer 2

[kryamk]

<div class="wrap">
    <header class="header">Header</header>
    <main>
      <div class="left">Sidebar</div>
      <div class="center">main</div>
      <div class="right">Sidebar</div>
    </main>
    <footer class="footer">Footer</footer>
  </div>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
main {
  display: flex;
  flex-grow: 1;
}
.center {
  flex-grow: 1;
}