基本思路
1首先完成header糊饱，footer虫埂，main的布局预柒。
利用flex-direction: column;完成上述內(nèi)容的豎向布局蜕劝。
2.之后再完成main之內(nèi)的三部分的布局。
這個(gè)是橫向布局
3 重點(diǎn)理解一下flex：1的意思鲁猩。如果某個(gè)元素flex：1且沒(méi)有設(shè)置寬度坎怪，則該元素占滿空間。
4body是header廓握，footer搅窿，main的容器嘁酿，body中的display:flex;控制header，footer男应，main的布局闹司。
main是left，right沐飘，content的容器游桩，main中的display:flex;控制left，right耐朴，content的布局不要混淆借卧。
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
display:flex;/* 頭、中部筛峭、腳縱向顯示 */
flex-direction: column;/* 頭铐刘、中部、腳縱向顯示 */
}
header,footer {
flex:0 0 50px;/* 頭影晓、腳尺寸固定镰吵，不放大、不縮小 50px指的是高度*/
background: pink;
}
#main {
display:flex;/*control content left right*/
flex:1; /* flex:1指的是等分挂签，但是由于是縱向排列疤祭，所以實(shí)際上就是自己占滿中部空間*/
}
#content {
background: palegoldenrod;
flex:1;/*content沒(méi)設(shè)置寬度，沒(méi)設(shè)置寬度就默認(rèn)全屏寬度竹握。
flex:1指的是等分画株，但是由于是縱向排列，所以實(shí)際上就是自己占滿中部空間 */
}
#left,#right{
background: paleturquoise;
flex:0 0 100px;/*設(shè)置left和right的寬度為100px啦辐，第一個(gè)參數(shù)0表示不擴(kuò)張谓传，第二個(gè)0表示不收縮 */
}
#left {
order:-1;/*設(shè)置left的位置為最左邊 */
}
</style>
<body>
<header></header>
<div id="main">
<div id="content"></div>
<div id="left"></div>
<div id="right"></div>
</div>
<footer></footer>
</body>
結(jié)果如圖
image.png
