CSS 圣杯布局（左右固定、中间自适应）

CSS 圣杯布局

1. flex 布局（推荐）
2. 定位布局（推荐）
3. css3 calc布局（影响性能，不推荐）

flex: 1

• 利用 flex: 1 可实现不同内容的 div 平分空间
• flex 属性是 flex-grow、flex-shrink、flex-basis 的简写，默认 flex: 0 1 auto
flex-grow 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大
  flex-shrink 定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小
  flex-basis 给上面的两个属性分配多余空间之前，计算项目是否有多余空间，默认 auto，即项目本身的大小
• flex: 1 的完整写法

flex-grow:1;
flex-shrink:1;
flex-basis:0%;

• flex: none 的完整写法

flex-grow:0;
flex-shrink:0;
flex-basis:auto;

• flex: auto 的完整写法

flex-grow:1;
flex-shrink:1;
flex-basis:auto;