flex:1和flex:auto是一种简写形式,两种形式的完成写法分别是:
flex:1; /*flex:1 1 0%*/
flex:auto; /*flex:1 1 auto*/
这三个值分别对应着flex-grow flex-shrink flex-basis,因此可见,我们要想弄明白这种写法的区别,我们需要先知道这三个属性都是啥意思。
flex构成
flex-grow:
grow是增长,而flex-grow则是将元素(b1,b2,b3)在一定范围内进行增长,这个一定范围就是外面容器的大小,最终的目的就是横向填满这个容器。这个属性默认值为0,也就是说如果容器没填满,也不填了,该是多大就是多大。如果设置为一个正整数,则是将容器剩余空间除以所有flex值之和,然后按比例分配。上图种b1,b2,b3的flex-grow都为1,因此将剩余空间等比进行划分为3份,每个b各占一份。
flex-shrink
flex-shink和grow的概念类似,只是当元素尺寸之和大于外容器,则按等比例进行缩小。该值默认值为1,则当元素超出,默认会将元素进行缩小
flex-basis
flex-basis:0%;
flex-basis:auto;
该属性定义在分配多余空间之前,项目占据主轴的空间,浏览器根据这个值计算,是否存在多余空间,默认值为auto，既项目本身的大小。当一个元素同时被设置flex-basic(除了auto)和width/height的情况下,flex-basis拥有更好优先级。
了解完上面三个属性,说flex:1和flex:auto区别
区别
未设置flex
flex:1
flex:1 /*flex:1 1 0%*/
元素宽度都为0%,将剩余大小空间按flex-grow/flex-shrink等比进行划分
flex:auto
flex:auto /*flex:1 1 auto*/
元素按本来大小进行计算,将剩余大小空间按flex-grow/flex-shrink等比进行划分
多说两句
flex的快捷取值规则:
flex:none /*flex:0 0 auto*/
flex:非负整数 /*flex:该整数 1 auto*/
flex:百分比 /*flex:1 1 百分比*/
flex:auto /*flex:1 1 auto*/
参考资料
1.[developer.mozilla.org/zh-CN/docs/…]
