本文共 1540 字，大约阅读时间需要 5 分钟。

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;}

参考：

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

   
	
    
     One
    
	
    
     Two
    
	
    
     Three
    
   

.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;}

依次修改下述属性值：

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