flex: flex-grow flex-shrink flex-basis

flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值:“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。
<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 {
  width: 220px;
  height: 220px;
  background-color: #b6b6b6;
}

.item1 {
  background-color: pink;
}

.item2 {
  background-color: lightblue;
}

.item3 {
  background-color: lightgreen;
}

为item设置flex: 1 1 auto;表示:
每个子容器 同时设置为flex-grow: 1 表示 3个子容器 “均分”弹性容器的剩余空间
每个子容器 同时设置为flex-shrink:1
每个子容器 同时设置为flex-basis: auto;
代码演示:

202103121615515097131661
也可以用flex: 1;表示:每个子容器 同时设置为flex-grow: 1 表示 3个子容器 “均分”弹性容器的剩余空间