1. flex-grow、flex-shrink、flex-basis用法说明
1. flex-grow 增长系数,父元素有剩余空间时,子元素如何占领剩余空间。默认值为0,不占领剩余空间。大于0,表示占领,值越大,占领的越厉害。
2. flex-shrink 缩小系数,父元素小于子元素时,子元素如何缩小。默认值为1,子元素会缩小。值越大,减小的越厉害。值为0,表示不减小。
3. flex-basis 设置元素的基础宽度,与元素width作用相同。与width同时设置时,flex-basis覆盖width。flex-basis值可以是auto,固定宽度,或百分比。auto表示使用元素自身的宽度。
2. flex简写说明
flex是flex-grow flex-shrink flex-basis的组合形式。常见的写法如下:
flex:1 <=> flex-grow:1 flex-shrink:1 flex-basis:0% flex-grow:1和flex-shrink:1表示元素增长和缩小等比例,是大于0的值都行,只要相等。flex-basis:0%表示基础宽度都为0,全部依靠伸缩来分配空间,其实为其他百分比也行,只要相等。
flex: 0 0 33.33% <=> flex-grow:0 flex-shrink:0 flex-basis:33.33% 表示元素不增长也不缩小,完全依靠百分比决定宽度
3. flex参考资料