重拾旧笔，好久不见

使用弹性盒子模型实现圣杯布局

<div class="father">
    <div class="left">1</div>
    <div class="center1">2</div>
     <div class="center2">3</div>
    <div class="right">4</div>
  </div>

页面结构如上，想要实现的结果为left盒子靠左，right盒子靠右，中间两个均分剩余空间。利用flex布局可以快速实现

.father {
  display: flex;
  height: 400px;
  background-color: pink;
  .left {
    height: 400px;
     200px;
    background-color: purple;
  }
  .right {
    height: 400px;
     200px;
    background-color: powderblue;
  }
  .center1 {
    background-color: rebeccapurple;
    flex: 1;//剩余空间均分之后独占一份

  }
  .center2 {
    flex: 1;
  }
}

最终呈现的效果如图所示

 如果div2和div3占比为1：2时，只需要更改flex对应数字即可，

.center1 {
    background-color: rebeccapurple;
    flex: 1; //剩余空间均分之后独占一份
  }
  .center2 {
    flex: 2;
  }

最终效果如下