basic flexbox layout

showing column layout

by hrabinowitz

HTML

<div class='container'>
    <div class='top'>
    top
    </div>
    <div class='content'>
    content
    </div>
    <div class='bottom'>
    bottom
    </div>
</div>

CSS

body {
    margin: 0px;
}

.container {
    height: 100vh;
    background: red;
    display: flex;
    flex-direction: column;
}
.top {
    height: 50px;
    background: yellow;
}
.content {
    flex: 1;
    background: gray;
}
.bottom {
    height: 70px;
    background: green;
}