今天把flex所有内容看了一遍，觉得这真是好东西。
阮大大的博客：
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
实现了圣杯布局，炒鸡简单的
css实现
1.整体body是column
.HolyGrail{
display: flex;
min-height: 100vh;
flex-direction: column;
}
2.页眉和页尾
header,footer{
flex: .1;
background: #ccc;
}
3.中间内容
nav，ads，content按flex分配，默认为1等分
.HolyGrail-body{
flex: 1;
display: flex;
background: pink;
}
.HolyGrail-content{
flex:2 ;
background: red;
}
.HolyGrail-nav{
flex: 1;background: green;
order: -1;
}
.HolyGrail-ads{
flex: 1;background: yellow;
}
4.让左右固定12em
.HolyGrail-ads,.HolyGrail-nav{
flex: 0 0 12em;
}
flex实现圣杯布局
大功告成～
圣杯用flex是不是很简单！～～～
flex做响应式也超级棒的！
如果max-width<768px，纵向排列，flex：1等分
@media (max-width: 768px) {
.HolyGrail-body{
flex-direction: column;
flex: 1;}
.HolyGrail-content,.HolyGrail-nav,.HolyGrail-ads{
flex: auto;}}
flex实现响应布局
flex是不是很厉害呢！～～！
