flex简介
flex属性在CSS新弹性盒模型中是比较常用的,本文将带你深入理解flex属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上flex的实例,希望能够对你有所帮助。
flex定义和用法
flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
默认值:看各分拆属性
适用于:弹性盒模型子元素
继承性:无
flex属性值
- none:
- none关键字的计算值为: 0 0 auto
- [ flex-grow ]:
- 定义弹性盒子元素的扩展比率。
- [ flex-shrink ]:
- 定义弹性盒子元素的收缩比率。
- [ flex-basis ]:
- 定义弹性盒子元素的默认基准值。
flex说明
复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
- 如果缩写flex:1, 则其计算值为:1 1 0
-
示例:如下情况每个元素的计算宽是多少
- 对应的脚本特性为flex。
来源:http://caibaojian.com/css3/properties/flex/flex.htm