flex实现最简单的三栏布局

通过flex布局来实现，主要使用order来调整三个部件的展示顺序

<div id="father">
    <div id="center"></div>
    <div id="left"></div>
    <div id="right"></div>
</div>

CSS部分

#father{
    width: 100%;
    height: 400px;
    background-color: pink;
    display: flex;
}
#center{
    flex:2 0 0;
    order: 2;
    background-color: gray;
}
#left {
    flex:1 0 0;
    order: 1;
    background-color: black;
}
#right {
    flex:1 0 0;
    order: 3;
    background-color: yellow;
}

补充下flex-basis属性的理解

1.felx-basis:0%;代表该子项视为0尺寸，即使声明100px，在计算剩余空间时也无影响； 2.felx-basis:auto;若该子项为100px，则100px不会计算到剩余空间中，剩余空间等于总空间-100px。