css布局大杀器--flex

今天把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是不是很厉害呢！～～！