今天把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做响应式也超级棒的!
如果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是不是很厉害呢!~~!