【前端开发之CSS布局】用flex布局实现经典布局

实现的功能：用flex布局实现上中下、左中右的经典布局，如图：

1. header和footer固定高度，中间的高度由calc(100% - 左高度 - 右高度) 实现；

2. 中间left， center，right属于同一层级，且都属于container的子级，其中container采用display: flex; left， right固定宽度，中间宽度同样计算：calc(100% - 左宽度 - 右宽度);

<style lang="less" scoped>
.component {
    height: 700px;
    width: 100%;
    .header {
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    .header-span {
        font-size: 1em;
        font-weight: bold;
    }
}
.footer {
    width: 100%;
    height: 80px;
    border: 1px solid #000;
    .footer-span {
        font-size: 1em;
        font-weight: bold;
    }
}
.container {
    width: 100%;
    height:calc(100% - 130px);
    display: flex;
    .container-left {
        background: #fff;
        border: 1px solid #000;
        width: 80px;
        height: 100%;
        .left-span {
            font-size: 1em;
            font-weight: bold;
        }
    }
    .container-right {
        background: #fff;
        border: 1px solid #000;
        height:100%;
        width: 80px;
          .right-span {
            font-size: 1em;
            font-weight: bold;
        }
    }
    .container-main {
        background: #fff;
        border: 1px solid #000;
        height: 100%;
        width: calc(100% - 160px);
        .main-span {
            font-size: 6em;
            font-weight: bold;
        }
    }   
}
}
</style>