flex属性值flex-grow/flex-shrink/flex-basis

flex的三个属性值（三个值都不支持负数）：

flex-grow：设置剩余空间分配情况。flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。不允许负值。

flex-shrink：父元素宽度小于子元素宽度之和时，子元素如何缩小自己的宽度的。默认值为1时表示超出地方平均分配。设置值越大，减小的越厉害。如果值为0，表示不允许收缩，设置多大就多大，当都设置为0是子元素会超出父元素。

flex-basis：该属性用来设置元素的宽度，其实，width也可以设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。basis简单理解就是在计算剩余空间分配前去掉的空间，值为auto/具体的width/0。

简写为flex：

flex：flex-grow  flex-shrink  flex-basis；

第一个写flex-grow 第二个为flex-shrink第三个flex-basis，中间用空格隔开。

几个特殊的值：

flex：1 0 auto；

flex：none；等同于flex-grow=0；flex-shrink=0；flex-basis=auto；

flex：0；等同于flex-grow=0；flex-shrink=0；flex-basis=0；

在flex设置为单个数字时；

例如：flex=1；等同于flex-grow=1；flex-shrink=1；flex-basis=0；

这个数字仅表示flex-grow，而无论值为多少，flex-shrink始终为1，flex-basis始终为0；

 

转载于:https://www.cnblogs.com/qianphong/p/10615613.html