【移动端debug-2】Flexbox在移动端的兼容实践
最近在项目中用到了flexbox，总结一下使用心得。
一、什么是flexbox，干嘛使的？
曾几何时，我们特别希望能像word一样，在排版时有个分散对齐选项（平均分配子元素宽度）这样我就可以任意在父元素里添加子元素的个数，而不用经过繁琐的计算。
css3中的flexbox可以实现这一点，并且还有很多很多别的高端上档次的用法，包括垂直居中、反向排列子元素等等……本文先介绍其中一种比较常用到的方法，别的案例碰到了再补充。
二、flexbox的兼容性问题
由于历史原因，flexbox的标准比较混乱，目前通用的版本就有三种：
老版本：display:box 和 display:inline-box（前者是块级元素，后者是内联元素）
混合版本（该版本仅ie10支持，移动端完全不用考虑）：display:flexbox 和 display:inline-flexbox（同上）
新版本：display:flex 和 display:inline-flex（同上）
每种版本的支持的浏览器不同，而且要针对不同浏览器添加前缀适配，为了兼容移动端的大部分浏览器，提炼如下：
display: -webkit-box; /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
display: -webkit-flex; /* 新版本 - 适配Chrome */
display: flex; /* 新版本,- 适配Opera 12.1, Firefox 20+ */
在这里他们的顺序非常重要。“display”属性本身并不添加任何浏览器前缀，我们需要确保我们老语法不要覆盖新语法让浏览器（可能总是会）同时支持。
三、使用方法：
要使用flex需要先了解以下概念：
1、伸缩盒子和伸缩项目：伸缩盒子就是父元素，伸缩项目就是子元素，只有先设置了父元素为flexbox，子元素里的伸缩相关属性才能生效。
2、主轴和侧轴：页面横向的轴是主轴，纵向的轴是侧轴。
3、伸缩流：伸缩盒子内的元素排列方式，类似流水顺序一样，因此称之为流。
由于flex的属性繁多，一上来就列举一堆属性概念不方便阅读学习，下面直接通过案例来了解flex是怎么用的，这样能先对这个css3的新属性有个直观的了解，之后可以自行查阅其他属性。
案例：设置一个伸缩盒子（父元素），无论添加多少个伸缩项目（子元素），都让它们平均分配宽度，如图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title></title> <style> .flex-parent { /*设置父元素为伸缩容器*/ display: -webkit-box; /*老版本：iOS 6-, Safari 3.1-6*/ display: -webkit-flex; /*新版本：Chrome*/ display: flex; /*标准规范：Opera 12.1, Firefox 20+*/ /*设置父元素内部的伸缩子元素项目换行规则：水平排列（row）不换行（nowrap）*/ -webkit-box-orient: horizontal; /*老版本：iOS 6-, Safari 3.1-6*/ -webkit-flex-flow: row nowrap; /*新版本：Chrome*/ flex-flow: row nowrap; /*标准规范：Opera 12.1, Firefox 20+*/ } .flex-son { /*设置子元素伸缩项目的伸缩比例*/ -webkit-box-flex: 1; /*老版本：iOS 6-, Safari 3.1-6*/ -webkit-flex: 1; /*新版本：Chrome*/ flex: 1; /*标准规范：Opera 12.1, Firefox 20+*/ /*此处无需设置宽度，因为flexbox会自动伸缩*/ height: 2rem; margin: 0 0.5rem; background: #000; } </style> </head> <body> <div class="flex-parent"> <div class="flex-son"></div> <div class="flex-son"></div> <div class="flex-son"></div> </div> </body> </html>
更多flexbox的使用方法可参考大漠的《图解CSS3》及w3c的flexbox标准原文http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/
