flex-basis

  • 版本:CSS3
  • 继承性:无
flex-basis属性在CSS新弹性盒模型中是比较常用的,本文将带你深入理解flex-basis属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上flex-basis的演示案例,希望能够对你有所帮助。

flex-basis的具体语法

flex-basis<length> | <percentage> | auto

默认值auto

适用于:弹性盒模型容器子元素

继承性:无

flex-basis的取值介绍

auto:
无特定宽度值,取决于其它属性值
<length>
用长度值来定义宽度。不允许负值
<percentage>
用百分比来定义宽度。不允许负值

flex-basis的使用说明

设置或检索弹性盒伸缩基准值。
  • 如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间
  • 对应的脚本特性为flexBasis

flex-basis的浏览器兼容性

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
较早版本 6.0-10.0 4.0-21.0 5.1.7-6.0 21.0-28.0-webkit- 9.5-12.0
较新版本 11.0 22.0 7.0-webkit- 29.0 12.1

flex-basis的完整演示案例

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册