常见的flex属性和其解释

flex:  [ <'flex-grow'>  <'flex-shrink'> ?  ||  <'flex-basis'> ]

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

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

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

.flex-item {

  /* 此属性值设置 */
  flex: 1 100px;

  /* 等同于 */
  flex-grow: 1;
  flex-basis: 100px;

}

参考： https://css-tricks.com/almanac/properties/f/flex/

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

<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 属性（不能缩小），即使元素可能会溢出。

如果让容器 box 里的flex元素呢内容超过 box 容器预设宽度。元素会溢出。 

2. flex: 0 auto 

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

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

但是当容器没有足够的空间时，该属性允许其缩小到项目的最小值。

因为空间不足第三个 div 缩放到除去其他元素所占空间的最小值，主轴上不会溢出。

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