flex总结

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参考资料

flex属性说明

flex简写说明

flex各种示例

原文地址:https://www.cnblogs.com/mengff/p/10148148.html