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;
}

代码演示:

202103121615514441157535