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