移动端开发--盒子模型:display:-webkit-box的使用

移动端开发–盒子模型:display:-webkit-box的使用

在移动布局中浮动已经不再重要,自适应成为主要的需求,所以display:-webkit-box;变的尤为重要.

box-flex是css3新添加的盒子模型属性,实现布局的垂直登高/水平均分/按比例划分.兼容性有待提高,没有得到完全支持,可以使用它们的私有属性定义Firefox(-moz)/opera(-o)/chrome/safari(-webkit）

一、box-flex属性

box-flex主要让子容器针对父容器的宽度按一定规则进行划分–父容器定义display：box后，子容器变为内联元素，使其居中只能通过给父容器定义text-align：center；

1、如果有一个或多个子容器设置了固定的宽度，父容器减去固定宽度，或者子容器的margin值，剩下的宽度再按照划分比例进行划分。

二、box属性

父容器里面的box属性：box-orient | box-align | box-pack | box-lines

1、box-orient

box-orient（排列）用来确定父容器里的子容器的排列方式，是水平还是垂直。可选属性如下所示：

horizontal | vertical | inline-axis | block-axis | inherit

horizontal、inline-axis说明：

给box设置horizontal或inline-axis属性其效果似乎表现一致，都可将子容器水平排列，具体两者有什么实质差别暂时还没有搞清楚。

如果父容器选择horizontal或inline-axis属性对子容器进行水平排列，其是对父容器的宽度进行分配划分。----此时如果父容器定义了高度值，其子容器的高度值设置则无效状态，所有子容器的高度等于父容器的高度值—；等高布局:如果父容器不设置高度值，其子容器的高度值才有效并且取最大高度值的子容器的高度。

vertical、block-axis说明：

给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，都可将子容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。

如果父容器选择vertical或block-axis属性对子容器进行垂直排列，其是对父容器的高度进行分配划分。此时如果父容器定义了宽度值，其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度值的子容器的宽度

inherit说明：

inherit属性则是让子容器继承父容器的相关属性。

2、box-direction

box-direction用来确定父容器里的子容器排列顺序，具体属性如下代码所示：

normal | reverse | inherit
normal是默认值
reverse表示反转

3、box-align

box-align表示父容器里面子容器的垂直对齐方式，可选参数如下所示：

start | end | center | baseline | stretch
start–在box-align表示居顶对齐
end–在box-align表示居底对齐
center–在box-align表示居中对齐
stretch–在box-align表示拉伸，拉伸到与父容器等高

4、box-pack

box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示：

**start | end | center | justify

start–在box-pack表示水平居左对齐
end–在box-pack表示水平居右对齐
center–在box-pack表示水平居中对齐**

**

justify–在box-pack表示水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）

**