CSS 中的 flex

CSS 中的 display:flex 确实给开发者提供了很大的便利，但有时候写起来可能也不是那么容易。

固定宽度

.item{
    flex:0 0 100px;
}

flex 是：flex-grow、flex-shrink、flex-basis 的缩写，上面的代码等价于：

.item{
    flex-grow:0;
    flex-shrink:0;
    flex-basis:100px;
}

首先说下 flex 是对于容器可用空间的分配策略，所以上面的代码就是：既不缩小，也不扩大，初始值100px。

应用场景

1. 两边固定宽度，中间自适应

<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 {
        flex: 0 0 94px;//不放大 不缩小 固定宽度94px
    }
    .item-center {
        flex: 1 1 auto;//可放大 可缩小
    }
    .item-right {
        flex: 0 0 16px;//不放大 不缩小 固定宽度94px
    }
}

例子：https://jsbin.com/lukayoc/edit?html,css,output