CSS box:box-flex

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
2020-01-16 10:39 举报

关于挟翼

挟翼一款提供UI页面设计的软件。
您只需要动一动鼠标绘制相关的元素,软件会自动帮你完成CSS样式和HTML代码。
从现在开始注册,立即赠送一年VIP会员。活动结束日期待定。