flex是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了（虽然现在还有很多不支持flex 的浏览器）。然而在移动开发中，本来绝大多数浏览器（包括安卓2.3以上的自带浏览器）都支持的属性，偏偏有个例外，就是国产某某X5内核神器（不知哪个版本的webkit，仅支持 display:box），自主研发这东西也不好多说什么了，下面入正题。
首先还是从两个版本的语法开始讲吧，这里还是假设flex容器为 .box ，子元素为 .item 。
旧语法篇
定义容器的display属性
|
1 2 3 4 5 |
.box{ display: -moz-box; /*Firefox*/ display: -webkit-box; /*Safari,Opera,Chrome*/ display: box; } |
容器属性
1.box-pack 属性
box-pack定义子元素主轴对齐方式。
|
1 2 3 4 5 |
.box{ -moz-box-pack: center; /*Firefox*/ -webkit-box-pack: center; /*Safari,Opera,Chrome*/ box-pack: center; } |
box-pack属性总共有4个值：
|
1 2 3 4 |
.box{ box-pack: start | end | center | justify; /*主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 左右对齐*/ } |
2.box-align 属性
box-align定义子元素交叉轴对齐方式。
|
1 2 3 4 5 |
.box{ -moz-box-align: center; /*Firefox*/ -webkit-box-align: center; /*Safari,Opera,Chrome*/ box-align: center; } |
box-align属性总共有5个值：
|
1 2 3 4 |
.box{ box-align: start | end | center | baseline | stretch; /*交叉轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/ } |
3.box-direction 属性
box-direction定义子元素的显示方向。
|
1 2 3 4 5 |
.box{ -moz-box-direction: reverse; /*Firefox*/ -webkit-box-direction: reverse; /*Safari,Opera,Chrome*/ box-direction: reverse; } |
box-direction属性总共有3个值：
|
1 2 3 4 |
.box{ box-direction: normal | reverse | inherit; /*显示方向：默认方向 | 反方向 | 继承子元素的 box-direction*/ } |
4.box-orient 属性
box-orient定义子元素是否应水平或垂直排列。
|
1 2 3 4 5 |
.box{ -moz-box-orient: horizontal; /*Firefox*/ -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/ box-orient: horizontal; ߐX5内核神器（不知哪个版本的webkit，仅支持 display:box），自主研发这东西也不好多说什么了，下面入正题。
首先还是从两个版本的语法开始讲吧，这里还是假设flex容器为 旧语法篇定义容器的display属性
容器属性1.box-pack 属性box-pack定义子元素主轴对齐方式。
box-pack属性总共有4个值：
2.box-align 属性box-align定义子元素交叉轴对齐方式。
box-align属性总共有5个值：
3.box-direction 属性box-direction定义子元素的显示方向。
box-direction属性总共有3个值：
4.box-orient 属性box-orient定义子元素是否应水平或垂直排列。
box-orient属性总共有5个值： |
