css3 弹性布局flex-basis属性 设置弹性元素在主轴上占据的空间

flex-basis

表示项目在(当前的主轴：水平轴)主轴上占据的空间，默认值为auto

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

css：

.container {
  display: flex;
  display: -webkit-flex;
  outline: 1px dashed red;
  width: 900px;
  margin: 200px auto;
}

.item {
  height: 220px;
}

/* flex-basis 表示项目在(当前的主轴：水平轴)主轴上占据的空间，默认值为auto。 */
.item1 {
  background-color: pink;
  /* 设置当前 弹性元素在主轴上 占据的空间 是160px（可以取单位是：像素或百分百） */
  flex-basis: 160px;
}

.item2 {
  background-color: lightblue;
  /* 设置当前 弹性元素在主轴上 占据的空间 是340px */
  flex-basis: 40%;
}

.item3 {
  background-color: lightgreen;
  /* 设置当前 弹性元素在主轴上 占据的空间 是300px */
  flex-basis: 300px;
}

代码演示：