holy-grail-layout-with-flexbox.md

用flexbox实现圣杯布局，代码很直观，进行2次flex排列：

• 上中下：flex-direction=column
  • 中间部分 flex-grow=1，占据所有剩余空间
  • 上下部分 flex-grow=0（默认值，可以不设置）
• 左中右：flex-direction=row（默认值）
  • 左边栏order=-1（负一），排在最左边
  • 左右边栏基准尺寸 flex-basis=100px，flex-grow=0（默认值）
  • 中间部分flex-grow=1，占据所有剩余空间

---

参考：https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/