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;