Flex布局实现圣杯布局，左右两列固定、中间列自适应的三列式布局

一、Flex主要解决两个问题：

1、元素位置：由6个容器属性和2个项目属性控制

6个容器属性

    flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content

2个项目属性

    order
    align-self

2、元素尺寸或自适应能力：由4个项目属性控制

4个项目属性（也可以说是3个，因flex是flex-grow、flex-shrink、flex-basis的集合，后两个可选）

    flex-grow
    flex-shrink
    flex-basis
    flex

关于上述这些属性的介绍和使用，请查看前面的文章Flex布局教程：语法篇。

---

二、使用flex实现圣杯布局

圣杯布局格式要求：

页面从上到下为头部、中部、脚部；头部、脚部定高，不可伸缩；中部高度自适应。

中部三列式布局：左右两列定宽，不可伸缩；中间内容区自适应。

完整代码及代码分析如下：