由于公司项目，一直需要支持ie9；导致作为5年的前端，居然对flex不是熟记于心，不得不二次学习下，（虽然之前学过，写过demo,但长时间不用，忘了，唉唉唉）
记住flex 布局核心是，弹性，抛弃了 display position float的布局方式；
1. 首先容器明确他的2个轴 main axis / cross axis
2. 父容器有6个属性：(排列方向 换行 主轴/交叉轴/多根轴对齐方式 )
flex-direction flex-wrap flex-flow
justify-content align-items align-content3. 子容器的6个属性：（顺序 放大 缩小 主轴空间 综合 子容器沿交叉轴（覆盖align-items） ）
order flex-grow flex-shrink flex-basis flex align-self
父容器常见的属性：值
主轴方向：
flex-direction： row/row-reverse/column/column-reverse
换行方式：
flex-wrap：nowrap/wrap/wrap-reverse
主轴与换行：
flex-flow:row nowrap
主轴的对齐方式：
justify-content:flex-start/flex-end/center/space-between/space-around
交叉轴的对齐方式：
align-items:flex-start/flex-end/center/baseline/stretch
多行沿交叉轴对齐：
align-content：flex-start/flex-end/center/space-between/space-around/stretch
子元素常见的属性和值
order:0; 默认顺序
flex-grow:0 /1/2/10/....
当空间多余时，将多余的空间，按照放大比例去放大。
例如
当3个子元素的该值分别是1 3 无；多出100px，
则分别在各自的宽高上增加100*1/(1+3) 75px 0;
当空间不足时，该值失效，会按照各自原本的宽高比例去缩放
例如
当3个子元素的该值分别是1 3 无;各自宽度是50 ,200 50 ，总宽是200;
则最终是200*50/(50+200+50),200*200/(50+200+50),200*50/(50+200+50)
flex-shrink:1/5/..
当空间不足时 不足的空间，由子元素通过收缩因子去减小
例如：当3个子元素的该值分别是1 3 没设置;各自宽度是50 ,200 50 ，父总宽是200;
则分别是50-100*50*1/(1*50+3*200+1*50);
200-100*200*3/(1*50+3*200+1*50);
50-100*50*1/(1*50+3*200+1*50);;
当空间多余时，该值失效 无意义。
flex-basis:auto/25%/50px/...
flex-basis 规定的是子元素的基准值。初始长度。所以是否溢出的计算与此属性息息相关。
应用准则：
content –> width –> flex-basis (limted by max|min-width)
flex-basis与width同在时，以flex-basis为准。
建议使用flex-basis，而非直接给定width
但max-width min-width能限制flex-basis。
即：flex-basis: 250px; max-width: 100px; 最终宽度会是100px；
即：flex-basis: 100px; min-width: 250px; 最终宽度会是100px；}
注意：
有flex-basis，有宽高，没设置flex-shrink。flex-grow，空间不足或多余时，都以该值为准，不收缩，也不扩张。
空间不足时，有flex-shrink,且有宽度,以flex-basis为基准，去计算不足的空间
flex:0 0 100%
align-self：**,取代align-items;item有自己独特的在交叉轴上的对齐方式
不容易理解的属性解释：
flex-basis :表示在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度，主轴为纵向时代表高度。
flex-wrap：设置换行方式,决定子容器是否换行,顺序换行还是支持逆序换行。
align-content:多行沿交叉轴对齐：当子容器多行排列时，设置行与行之间的对齐方式。
细讲下flex
flex 是 flex-grow、flex-shrink、flex-basis的缩写
flex 的默认值是 0 1 auto。
当 flex 取值为 none，则计算值为 0 0 auto，
当 flex 取值为 auto，则计算值为 1 1 auto，
当 flex 取值为 1，则计算值为 1 1 0%，
当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：
当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，
当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，
flex:24px; // 1 1 24px
flex:0%; // 1 1 24px
flex:2 ; // 2 1 0%
flex:2 3; // 2 3 0%
flex:2 20%; // 2 1 20%
demo
用flex 写一个圣杯布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-圣杯布局</title>
<style type="text/css">
.Grid{
width:100%;
display: flex;
flex-direction:column;
min-height: 100vh;
}
.main{
flex:1;
display: flex;
}
.header,.footer{height:100px;}
.aa{flex:1;}
.aa1,.aa3{ width:10vw;}
.aa2{ width:25%;}
.aa0{width:50% }
</style>
</head>
<body>
<div class="Grid">
<div class="header">
<div class="aa aa0">12</div>
<div class="aa aa1">34</div>
<div class="aa aa2">56</div>
</div>
<div class="main">
<div class="aa1">ddd</div>
<div class="aa">.gg.</div>
<div class="aa">..gg.</div>
<div class="aa3">..gg.</div>
</div>
<div class="footer">..fgfgfg.</div>
</div>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。