<div class="wrap">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
</div>
html, body {
height: 100%;
margin: 0;
}
.wrap {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.box {
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
background-color: green;
}
.box-3 {
margin-top: auto;
}
<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;
}