html
<div class="header">我是页眉</div>
<div class="contain">
<div class="main">我是主内容</div>
<div class="left">我是侧边栏</div>
<div class="right">我是右边栏</div>
</div>
<div class="footer">我是页脚</div>
css
* {
padding: 0;
margin: 0;
}
html,body{
height:100%;/*高度占据整个窗口*/
}
body{
display: flex;
flex-direction:column;
}
.header {
background: #00b8ff;
/* 头、脚尺寸固定，不放大、不缩小 */
flex:0 0 50px;
}
.contain {
display: flex;
flex: 1;/*让子元素都有相同的长度*/
background: rgba(34, 216, 107, 0.97);
}
.main {
flex-grow: 1;
order: 2;
background: pink;
}
.right{
order: 3;
background:yellow;
}
.footer {
/* 头、脚尺寸固定，不放大、不缩小 */
flex:0 0 60px;
background: greenyellow;
}
利用弹性布局之后，当页面窗口改变，页面会自动调整大小
