自适应布局display:-webkit-box的用法

上班的路上我突然想到一个问题display:-webkit-box的用法。这个东西我经常去用。但是经常忘记他的用法。不过为了兼容性问题，我们一般都加上 display: -moz-box; display: -webkit-box; display: box;

display:-webkit-box的作用非常神奇。不过这个属性一定要在父级元素那里定义display:-webkit-box;他可以让子级呈现一排。类似与float：left和diaplay：inline-bloak。我们在父级定义了这个属性。第一列应该给个宽度。然后它会分配不同的比例（三列布局，一列定宽，其余两列安1:2的比例自适应）。
Flexible Box Model(灵活盒子模型)有以下几个属性：

1.box-orient
box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有：
horizontal | vertical | inline-axis | block-axis | inherit
其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。

2.box-flex 兄弟元素之间比例
目前没有浏览器支持 box-flex 属性。
Firefox 支持替代的 -moz-box-flex 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

3.box-align box 排列

start | end | center | baseline | stretch

start表示顶边对齐，end为底部对齐，center为居中对齐，baseline表示基线（英文字母o,m,n等的底边位置线）对齐。
box-align与box-pack都是决定盒子内部剩余空间怎么使用的。在行为效果上就是表现为“对齐”。
其中box-align决定了垂直方向上的空间利用，也就是垂直方向上的对齐表现。为了便于记忆，我们可以拿来和CSS2中的vertical-align隐射记忆，两者都有”align”，都是都是垂直方向的对齐；而剩下的box-pack就是水平方向的了。

4.box-direction box 方向
box-direction是用来确定子元素的排列顺序，可选值有：
normal | reverse | inherit
其中normal是默认值，表示按照正常顺序排列。而reverse表示反转，原本从左往右应该是1-2-3的，结果显示确实3-2-1。

5.box-flex-group 以组为单位的流体系数
box-flex-group和box-ordinal-group，其中box-flex-group的作用不详，目前浏览器也不支持

6.box-lines

single | multiple

7.box-ordinal-group 以组为单位的子元素排列方向

8.box-pack
box-pack决定了父标签水平遗留空间的使用，其可选值有：

start | end | center | justify
start是box-pack属性的默认值，justify表示两端对齐。