CSS3参考手册
»
属性列表
»
新弹性盒模型属性
»
相关内容：
其它弹性盒模型属性
选择其它项
flex-basis
版本：CSS3
继承性：无
语法：
flex-basis
：
<length>
|
<percentage>
| auto
默认值
：
auto
适用于
：弹性盒模型容器子元素
继承性
：无
取值：
auto：
无特定宽度值，取决于其它属性值
<length>
：
用长度值来定义宽度。不允许负值
<percentage>
：
用百分比来定义宽度。不允许负值
说明：
设置或检索弹性盒伸缩基准值。
如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间
对应的脚本特性为
flexBasis
。
兼容性：
浅绿
= 支持
红色
= 不支持
墨绿
= 部分支持
支持版本
\类型
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
示例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>flex-basis_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> h1{font:bold 20px/1.5 georgia,simsun,sans-serif;} .box{ display:-webkit-flex; display:flex; width:600px;margin:0;padding:10px;list-style:none;background-color:#eee;} .box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;} #box li:nth-child(3){ -webkit-flex-basis:600px; flex-basis:600px; } </style> </head> <body> <h1>flex-basis示例：</h1> <ul id="box" class="box"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> </ul> </body> </html>