flex 聖杯佈局

基本思路

聖杯佈局分為3段：上、中、下。  中段被分為：左、中、右3塊。

1：採用flex佈局時，先把彈性容器主軸設置為垂直方向（flex-direction:column）

2：上、中、下3塊彈性項目設置均勻拉伸（flex:1）或固定上、下兩端大小，讓中間自動拉伸。註意：flex:拉伸是方向為主軸方向

3：中段部分在設置為彈性容器，主軸方向為水平方向（flex-direction:row），此時左、中、右3塊為彈性項目。中間塊設置為自動拉伸，左、右兩塊可設置固定寬度。

代碼

    <div class="container">
        <div class="header"></div>
        <div class="content">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>

.container{
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.header,
.footer{
    height: 75px;
    background: greenyellow;
}
.content{
    display: flex;
    flex-direction: row;
    flex: 1;
}
.left,.right{
    width:200px;
    background: darkorange;
}
.center{
    flex: 1;
}