目录

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的宽值。
}

执行结果


跳至内容顶部