box-flex简介
box-flex属性在CSS弹性盒中是比较常用的,本文将带你深入理解box-flex属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上box-flex的实例,希望能够对你有所帮助。
box-flex定义和用法
box-flex:<number>
默认值:0
适用于:弹性盒子元素
继承性:无
动画性:否
计算值:指定值
box-flex属性值
- <number>:
- 使用浮点数指定对象所分配其父元素剩余空间的比例。
box-flex说明
设置或检索弹性盒对象的子元素如何分配其剩余空间。
- 效果类似于过渡版本和新版本的flex属性;
-
示例:将一个容器分成6份,子对象a分1份,b分2份,c分3份
- 误区:注意box-flex只是动态分配父元素的剩余空间,而不是整个父元素的空间。如上例,父元素#box的宽度为240px,如果你认为a,b,c的宽度分别为60, 60, 120那么就错了,因为box-flex只是分配父元素的剩余空间而已,所以a,b,c所分到的应该是除内容外所剩余下来的宽度
-
为了清晰所谓的剩余空间分配,对上例稍作修改,HTML Code不变
- 对应的脚本特性为boxFlex。
来源:http://caibaojian.com/css3/properties/flexible-box/box-flex.htm