<div class="container">
<div class="menu">MENU</div>
<div class="post">POST</div>
<div class="sidebar">SIDEBAR</div>
<!-- <div class="item"></div> -->
<div class="footer">FOOTER</div>
</div>
.container {
display: flex;
flex-flow: row wrap;
* {
flex: 1 100%;
margin: 10px;
height: 150px;
display: flex;
color: white;
text-align: center;
justify-content: center;
flex-direction: column;
}
.menu {
height: 50px;
background: coral;
}
.post {
background: #2196F3;
flex: 3 0;
}
.sidebar {
flex: 1 0;
background: orange;
}
.footer {
background: navy;
height: 50px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.