Flex语法
Flex布局意为"弹性布局"，用来为盒模型提供更多灵活性。此外，Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex;)生效，需要注意的是，如果父元素设置了Flex容器，则子元素的float、clear和vertical-align属性将失效。
Flex布局需要注意下面几个重要的概念，结合下面这张图也许能更好的理解:
- flex容器(flex container)
- flex项目(flex item)
- 主轴(main axis)
- 交叉轴(cross axis)
- 开始位置(start)
- 结束位置(end)
提示：定义在容器(container)上的属性和定义在项目(item)上的属性不可搞混!
关于语法的其余部分，请参考阮一峰的教程，希望你能熟记里面的示例图:
上面部分搞定，趁热打铁做一下下面的练习，做上两次基本上Flex就基本没问题了。
- Flex训练游戏: 地址
Flex常规布局
1. 单列布局
单列布局使用场景非常多，用来实现文本或者block的居中效果。对外部容器定义就可实现内部布局效果，实现起来非常简单，尤其是使用响应式布局中。以下示例都是Flex的基本使用语法。
基本的DOM结构如下:
<div class="parent"> <div class="children"></div> </div> - 水平居中
.parent{ display:flex; justify-content:center; } - 垂直居中
.parent{ display:flex; align-items:center; } - 水平垂直全部居中
.parent{ display:flex; justify-content:center; align-items:center; } 2. 多列布局
多列布局使用较多，比如商品展示需要在左侧显示图片，右侧显示详情；
多列布局的示例DOM结构如下:
<div class="container"> <div class="left">Left</div> <div class="right">Center</div> <div class="center">Right</div> </div> - 左列定宽，右列自适应 | 右列定宽，左列自适应(同理)
该布局方式非常常见，适用于定宽的一侧常为导航，自适应的一侧为内容的布局。
示例
样式
.container{ display:flex; } .left{ flex: 0 0 300px; } .right{ flex:1; } - 左中两列定宽，右侧列自适应
示例
样式
.container{ display:flex; } .left，.center{ flex: 0 0 100px; } .right{ flex:1 } - 两侧定宽，中栏自适应
示例
样式
.container{ display:flex; } .left{ width:100px; } .center{ flex:1; } .right{ width:100px; } - 一列不定宽，一列自适应
示例
样式
.container{ display:flex; } .right{ flex:1; } - 多列等分布局
多列等分布局常出现在内容中，多数为功能的，同等级内容的并排显示等。
示例
样式
.container{ display:flex; } .left，.center，.right { flex:1; } 3. 九宫格布局
示例
DOM结构
<div class="container"> <div class="row"> <div class="left">Left</div> <div class="right">Center</div> <div class="center">Right</div> </div> <div class="row"> <div class="left">Left</div> <div class="right">Center</div> <div class="center">Right</div> </div> <div class="row"> <div class="left">Left</div> <div class="right">Center</div> <div class="center">Right</div> </div> </div> 样式
.container { display: flex; flex-direction: column; height: 300px; width: 300px; .row { height: 100px; display: flex; } .left，.center，.right { flex: 1; height: 100px; } } 4. 圣杯布局
示例
DOM结构
<div class="container"> <header class="header"> Header </header> <article class="article"> <nav class="nav">Nav</nav> <section class="body">Body</section> <aside class="aside">Aside</aside> </article> <footer class="footer"> Footer </footer> </div> 样式
.container { display: flex; flex-direction: column; min-height: 100vh; justify-content: space-between; .header，.footer { flex: 0 0 100px; } .article { display: flex; flex: 1; .nav { flex: 0 0 100px; } .body { flex: 1; } .aside { flex: 0 0 100px; } } } 5. 响应式布局
设置meta
使用前需要对设置meta标签，设置布局宽度等于设备宽度，布局viewport等于度量viewport。
<meta name='viewport' content='width=device-width，initial-scale=1'> 媒体查询
HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表，比如，一个页面在屏幕上显示时使用无衬线字体，而在打印时则使用衬线字体，screen 和 print 是两种已定义的媒体类型，媒体查询让样式表有更强的针对性，扩展了媒体类型的功能; 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成，媒体查询中可用于检测的媒体特性有width、height和color（等），使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
@media screen and (max-width:960px){....} <link rel='stylesheet' media='screen and (max-width:960px)' href='xxx.css' /> 兼容性问题解决方案
对于移动端的处理主要是解决兼容性，毕竟新出的事物普遍接受还是需要过程的，但是把握趋势对不兼容的情况需要做好补丁。这里是Caniuse.com上的关于Flex的兼容性。
我在开发的要求是能用工具处理的不进行人为干预，因为这样会增加开发及维护成本，浪费生命。 有句话: "工欲善其事必先利其器"，因此按照Flex的标准去开发，剩余的事情交给自动化工具处理。
这里使用的工具是gulp-autoprefixer，配置的参数：
{
browsers: [ 'last 2 versions', 'iOS >= 7', 'Android >= 4'], cascade: false } 源码
{
display: flex; flex: 1; align-items: center; } 兼容后
{
display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } 最后
Flex布局高效简洁且有兼容性处理方案，因此朝这个趋势走不会有错。