How to do this in flex-box?

Question

css

how to do this in flexbox?
let's say the content block is the main, and to the left and to the right of it there are 2 asides.
How to arrange them like that?

Answer 1

<div class="container">
  <aside></aside>
  <aside></aside>
  <main></main>
  <aside></aside>
  <aside></aside>
</div>

.container {
  width:900px;
  height:200px;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
}
aside {
  width:300px;
  height:100px;
}
main {
  width:300px;
  height:200px;
}