flex 弹性盒子

之前用flex。一直都是flex:1 0 xx%,之前一直都用的很好，没什么大的问题。最近要做一个每列4项的标签列表。而且是用于手机端。ok. 那就就是flex了。。ul上加上display:flex;li上加上flex:1 0 25%; 问题来了。当第二行只有两个标签的时候每个宽度竟然都变成了50%。  蛤？what happen? 这么智能。。可是我不要啊。。那么问题就来了。这就要说到flex：1 0 25%;这三个数字分别代表的属性了;

   flex:1 0 25%中的1表示 flex-grow ,这个属性的含义是：

• 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的

也就是如果值不为0就分配flex中剩下的空间的。比如 有三个flex的元素，每个都有flex-grow:1;那么每个元素就是获取剩余的空间的1/3;

flex：1 0 20% 中的0表示flex-shrink:表示的是

    

• 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

也就是说这个参数只有在子元素的宽度和超过父元素设置的宽度时才生效，他是根据设置的值来进行计算决定每个子元素应该移除的宽度。0表示不移除宽度

flex：1 0 25%中最后一个参数表示flex-basis,即：

• 设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间