本文主要参考阮一峰Flex布局教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html。
弹性布局给我们网页的布局方式提供了很大的便利，可以很方便的实现各种布局。
一、容器属性和项目属性
容器属性
容器属性指的是需要实现弹性布局的整体，也就是父布局，可设置的属性有以下6个：
1.flex-direction：主轴的排列方式 （row | row-reverse | column | column-reverse）
2.flex-wrap：换行方式（nowrap | wrap | wrap-reverse）
3.flex-flow：flex-direction和flex-wrap的简写
4.justify-content：主轴的对齐方式（flex-start | flex-end | center | space-between | space-around）
5.align-items：交叉轴的对齐方式（flex-start | flex-end | center | baseline | stretch）
6.align-content：多根轴线对齐方式（flex-start | flex-end | center | space-between | space-around | stretch）
项目属性
项目属性指的是具体要如何排列的元素的属性，也就是子布局，可设置的属性有以下6个：
1.order：项目的排列顺序，值越小越靠前。
2.flex-grow：项目的放大比例，即轴线空间多余，该项目放大多少，等比放大。
3.flex-shrink：项目的缩小比例，即轴线空间不足，该项目缩小多少，等比缩小。
4.flex-basis：在分配多余空间之前，项目占据主轴空间，浏览器根据此属性再计算主轴的剩余空间。
5.flex：flex-grow，flex-shrink，flex-basis的简写。
6.align-self：单个项目与其他项目不同的对齐方式（auto | flex-start | flex-end | center | baseline | stretch）。
补充：
1.flex-basis是在放大或缩小之前统计的，先统计完flex-basis的值再计算浏览器是否还有剩余空间来进行flex-grow和flex-shrink的放大缩小。
2.flex的缺省值：
默认：0 1 auto
none：0 0 auto
auto：1 1 auto
num(单一数值)：num 1 0%
50%/500px(长度值)：1 1 50%/500px
num1 num2(两个数值)：num1 num2 0%
num 50%(数值+长度值)：num 1 50%
二、圣杯布局
HTML：
<body> <div class="shengbei"> <header></header> <div class="content"> <div class="center"></div> <div class="left"></div> <div class="right"></div> </div> <footer></footer> </div> </body>
CSS：
.shengbei{ display: flex; height: 100vh; flex-direction: column; } header,footer{ flex: 0 0 5em; background-color: gray; } .content{ flex: 1; display: flex; background-color: skyblue; } .center{ flex: 1; background-color: slateblue; } .left,.right{ flex: 0 0 5em; background-color: springgreen; }