flex-basis
flex-basis 规定 flex item 在主轴方向上的初始大小。如果不使用box-sizing来改变盒模型的话，那么这个属性就决定了flex item的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。
语法
flex-basis: <'width'> | auto (default auto)
值
| 值 | 描述 |
|---|---|
| auto | 无特定宽度值，取决于其它属性值 |
| <width> | 值可以是一个数字后面跟着绝对单位例如px,mm,pt;该值也可以是一个百分数，这个百分数就是相对于其父弹性盒容器的宽或者高（取决于主轴方向）。负值是不被允许的。 |
例子
HTML
<ul id="stage" class="stage"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> </ul>
CSS
.stage{
display:-webkit-flex;
display:flex;
width:600px;
margin:0;
padding:10px;
list-style:none;
background-color:#333;
}
.stage li{
width:100px;
height:100px;
border:1px solid #aaa;
text-align:center;
color:#fff;
}
#stage li:nth-child(3){
flex-basis:600px;//600px的宽值。
}
执行结果
- a
- b
- c
- d
- e