css3 弹性布局flex-grow自动调整宽度

flex-grow 属性用于设置或检索弹性盒子的扩展比率。

前提：不给弹性元素设置宽度

<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: 150px;
  background-color: #b4b4b4;
}

.item1 {
  background-color: pink;
}

.item2 {
  background-color: lightblue;
}

.item3 {
  background-color: lightgreen;
}

代码演示：

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

.item {
  /* (1)不给弹性元素设置宽度 当主轴上的 弹性元素，不给宽度的时候， 给其设置flex-grow:1; 表示：弹性元素会等分 弹性容器的剩余空间！！(当你一旦给这样元素，设置 flex-grow: 1;这个属性的时候， 弹性元素 会自己给自己分配 宽度！) */
  height: 150px;
  background-color: #b4b4b4;
  /* margin: 10px; */
  flex-grow: 1;
}

.item1 {
  background-color: pink;
}

.item2 {
  background-color: lightblue;
  /* 把它 自己的宽度，放大了4倍。 */
  flex-grow: 4;
}

.item3 {
  background-color: lightgreen;
}

代码演示：