使用flex进行圣杯布局

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        /* 这里要设置 不然不能伸长占据父元素大小 */
        body,html{
            height: 100%;
        }
        header{
            background-color: red;
        }
        section{
            flex:1;
            display: flex;
            flex-direction: row;
        }
        div.left{
            background-color: goldenrod;
            order: -1;
        }
        div.center{
            background-color: green;
            flex: 1;
        }
        div.right{
            background-color: skyblue;
        }
        footer{
            background-color: plum;
        }
    </style>```


**注意事项：**

 1. 得设置body,html的值为100%。
 2. 把center放在最前面，为了早点显示center的内容
 3. 还可加上缩小的很小时出现响应式布局（待写...）