Flex 布局 flex-grow 占用空间

1、占用空间 flex-grow

没有设置 flex-grow 时：s1、s2、s3、s4 各宽度100，预留多余空白处。

s2设置 flex-grow 时：占用了多余空白处，增长了自身宽度，没有了多余的空白处，自身宽度也从宽度100加到了114。

s2和s3都设置了flew-grow时：同时平分了多余的空白处，并且自身宽度都增加了。

  
  
  
  


.container{
  display: flex;
}
.s1{
  width: 100px;
  height: 100px;
  background-color: red;
}
.s2{
  width: 100px;
  height: 100px;
  background-color: yellow;
  flex-grow: 1;  /* grow字面意思是增长，占用多余空间的宽度，所以自身宽度会变宽 */

}
.s3{
  width: 100px;
  height: 100px;
  background-color: blue;
  flex-grow: 1; /* 平分占用多余空间的宽度 */
}
.s4{
  width: 100px;
  height: 100px;
  background-color: orange;
}