CSS - Flex（一）

flex 属性值可以包含三个参数：flex-grow，flex-shrink 和 flex-basis。

第二个和第三个参数（flex-shrink 和 flex-basis）可选。

当flex属性值取两个参数的时候。默认指定的是第一个参数和第三个参数值。如下述：

.flex-item {
  /* 此属性值设置 */
  flex: 1 100px;
  /* 等同于 */
  flex-grow: 1;
  flex-basis: 100px;
}

通过这个例子验证下边的属性：

<div class="box">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</div>  

.box {
    width: 250px;
    height: 35px;
    border: 1px solid #555;
    font: 14px Arial;
    display: flex;
    flex-direction: row;
}
.box > div {
    flex:auto;
    /* 接下来修改这个属性值测试 */
}
.box > div:nth-child(1) {
    background-color: #D3D3D3;
}
.box > div:nth-child(2) {
    background-color: #EEB4B4;
}
.box > div:nth-child(3) {
    background-color: #ADD8E6;
}

设容器 box 下的每个div项目的 flex 初始值为 auto 。

依次修改下述属性值：

1. flex: none

等同于 flex: 0 0 auto

这时候容器完全不再灵活。即不能放大也不能缩小。

该属性和 flex:initial （下方）很类似，除了它不允许 flex-shrink 属性（不能缩小），即使元素可能会溢出。

2. flex: 0 auto

等同于 flex: initial.  默认值为flex: 0 1 auto。

此时，当容器剩余一些空闲空间时，该属性使灵活的项目变得不灵活，因为其不能自由拉伸放大。

3. flex: auto

等同于 flex: 1 1 auto

这个时候，该属性使项目完全灵活，它们能够吸收主轴上额外的空间。既可以自由放大也可以自由缩小。

4. flex: <positive-number> <意为正数>

等同于 flex: <positive-number>  1  0px

当 flex 取值为一个非负数字，则该数字为 flex-grow 的值，flex-shrink 取 1，flex-basis 取 0%。

这个时候，该属性使弹性项目变得灵活，flex元素在主轴方向上的初始大小flex-basis为零。

项目将根据容器的大小按照自身的比例自由伸缩。

5. flex: <positive-number>  xxpx || xx%

等同于 flex: <positive-number>  1  xxpx || xx%

该属性和上边的CSS案例一致，即 当 flex 取值为一个非负数字和一个长度（px）或百分比（%），

则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 默认取 1。