flex 实现的圣杯布局

• 关键点
  通过 margin-left 与 left 属性将左右两列放置到准确的位置；
  父元素需要设置 padding；
  margin-left 取值为百分比时，是以其父元素的宽度为基准的；
• 和双飞翼不同的地方
  圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度。

html：

<div class="container">
  <div class="middle