水平居中

See the Pen mRdeaG by lizijie (@lizijie1993) on CodePen.

垂直居中

See the Pen oBNLjB by lizijie (@lizijie1993) on CodePen.

悬挂布局

要点：保证任一部分高度不足时，容器不会塌陷。

See the Pen vgYyxL by lizijie (@lizijie1993) on CodePen.

圣杯布局（双飞翼布局）

要求：

1. 三列布局，中间宽度自适应，两边定宽；
2. 中间栏要在浏览器中优先展示渲染；
3. 允许任意列的高度最高。

See the Pen VPwpGN by lizijie (@lizijie1993) on CodePen.

参考

Flex 布局教程：实例篇 阮一峰