flex常见布局方式

flex布局左右两边固定，中间自适应

<div class="content">
    <div class="item-left"></div>
    <div class="item-center"></div>
    <div class="item-right"></div>
</div>

    .content {
        display: flex;
        align-items: center;
    }
    .item-left {
        width: 100px;
        flex: 0 0 100px
    }
    .item-center{
        flex: 1 1 auto;
    }
    .item-right {
        width: 100px;
        flex: 0 0 100px
    }

这里flex的第三个属性的含义为flex-basis:在分配剩余空间之前，该项目占据的主轴空间。

flex 左侧固定宽度，右边自动适应。

<div id="flex">
  <div id="left">我在左边，自适应布局</div>
  <div id="right">我在右边，定宽</div>
</div>

#flex {
    display: flex;
}
#left {
    width: 100px;
}
#right {
    flex: 1 1 auto;
}