/ 子元素平均分布 /
.flex1 {
-webkit-box-flex: 1; / OLD - iOS 6-、Safari 3.1-6 /
-moz-box-flex: 1 / 旧 - Firefox 19- /
width: 20%; / 对于旧语法，否则会折叠。 > -ms-flex: 1 / IE 10
/; flex: 1; / 新，规范 - Opera 12.1、Firefox 20
/}/
父元素 - 水平对齐（主页）/。 flex -h {
显示：框 /
旧 - Android 4.4- / 显示：-webkit-box /
旧版 - iOS 6-、Safari 3.1-6
/ 显示：-moz-box / 旧版 - Firefox 19 - （有问题，但大部分有效）
/ 显示：-ms-flexbox / TWEENER - IE 10
/ 显示：-webkit-flex; / 新 - Chrome
/ 显示：flex / 新，规格 - Opera 12.1、Firefox 20
/ /第09版
/ -webkit-box-orient: 水平; /
第 12 版 / -webkit-flex-direction: row;
-moz-flex-direction : 行;
-ms-flex-direction: 行; -o-flex-direction: row; flex-direction: row;
}
/
父元素 - 水平方向
/
.flex-hw {
/
09 版 / /
-webkit-box-lines：多个;
/ / 第 12 版
/ -webkit-flex-wrap: 换行; -moz-flex-wrap: 换行;
-ms-flex -wrap: 包裹; -o-flex-wrap: 包裹; flex-wrap: wrap;
}
/
父元素-水平停留（主载具为横向赛生效果）
/
.flex-hc {
/
09版 / -webkit-box-pack: center;
/
第 12 版 / -webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center; -o-justify- content: center; justify-content: center;
/* 家取值下下：

align-items     主轴原点方向对齐
flex-end        主轴延伸方向对齐
space-between   等间距排列，首尾不留白
space-around    等间距排列，首尾留白

*/
}
/ 父元素-纵向排列（主轴） /
.flex-v {
display: box; / OLD - Android 4.4- /
display: -webkit-box; / OLD - iOS 6-, Safari 3.1-6 /
display: -moz-box; / OLD - Firefox 19- (buggy but mostly works) /
display: -ms-flexbox; / TWEENER - IE 10 /
display: -webkit-flex; / NEW - Chrome /
display: flex; / NEW, Spec - Opera 12.1, Firefox 20 /
/ 09版 /
-webkit-box-orient: vertical;
/ 12版 /
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
/ 父元素-纵向换行 /
.flex-vw {
/ 09版 /
/-webkit-box-lines: multiple;/
/ 12版 /
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
/ 父元素-竖直居中（主轴是横向才生效） /
.flex-vc {
/ 09版 /
-webkit-box-align: center;
/ 12版 /
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
}
/ 子元素-显示在从左向右（从上向下）第1个位置，用于改变源文档顺序显示 /
.flex-1 {
-webkit-box-ordinal-group: 1; / OLD - iOS 6-, Safari 3.1-6 /
-moz-box-ordinal-group: 1; / OLD - Firefox 19- /
-ms-flex-order: 1; / TWEENER - IE 10 /
-webkit-order: 1; / NEW - Chrome /
order: 1; / NEW, Spec - Opera 12.1, Firefox 20 /
}
/ 子元素-显示在从左向右（从上向下）第2个位置，用于改变源文档顺序显示 /
.flex-2 {
-webkit-box-ordinal-group: 2; / OLD - iOS 6-, Safari 3.1-6 /
-moz-box-ordinal-group: 2; / OLD - Firefox 19- /
-ms-flex-order: 2; / TWEENER - IE 10 /
-webkit-order: 2; / NEW - Chrome /
order: 2; / NEW, Spec - Opera 12.1, Firefox 20 /
}

网络应用

移动端兼容跟手机系统版本有很大关系。因为应用内嵌网页用的一般都是系统自带的浏览内核。你不说个具体版本还真不好判断。一般情况下iOS的兼容比安卓好，性能也高

苹果支持的ok，安卓的话根据系统的不同有很大差别。尤其是微信安卓版的自带的浏览器，之前它内核不支持flexbox，现在据说更新了，不过还没尝试。
总的来说，应该先考虑你的目标用户群体，从诸如年龄、消费水平、心理等方面入手，知道在他们中Android和iOS的用户大致占多少（以及不同安卓手机的大概比重）以后，才便于选择技术。调查以后如果发现只有很少一部分用户的手机不支持flexbox的话，就可以放心的在一定程度上使用它喽。
by the way，不管怎样还是建议在一定程度上做下兼容性处理的

http://pleeease.io/play/

这个网站css3前缀生成，尽量做到最好。。