目前box-flex 属性还没有得到firefox, Opera, chrome浏览器的完全支持，但我们可以使用它们的私有属性定义firefox(-moz-)，opera(-o-)，chrome/safari（-webkit-）。box-flex属性主要让子容器针对父容器的宽度按一定的规则进行划分。 代码如下：

<div> <p>Hello</p> <p>W3School</p> </div> <style> .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style>

如下图所示：

注意：

1. 必须给父容器定义 display: box, 其子元素才可以进行划分。如上给id为p1设置box-flex设置为1，给id为p2设置box-flex为2，

说明分别给其设置1等分和2等分，也就是说给id为p1元素设置宽度为 300 * 1/3 = 100px; 给id为p2元素设置宽度为 300 * 2/3 = 200px;

2. 如果进行父容器划分的同时，他的子元素有的设置了宽度，有的要进行划分的话，那么划分的宽度 = 父容器的宽度 – 已经设置的宽度 。

再进行对应的划分。

如下图所示：

二：box具体的属性如下：

box-orient | box-direction | 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 属性效果表现一致。都可以将子元素进行水平排列.

如下html代码：

<div> <p>Hello</p> <p>W3School</p> </div> css代码如下： <style> .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-orient:horizontal; -webkit-box-orient:horizontal; box-orient:horizontal; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style>

如下图所示：

二：vertical 可以让子元素进行垂直排列; 

css代码如下：

<style> *{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-orient:vertical; -webkit-box-orient:vertical; box-orient:vertical; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style>

如下图所示：

三：inherit。 Inherit属性让子元素继承父元素的相关属性。效果和第一种效果一样，都是水平对齐;

2. box-direction

还是如下html代码：

<div> <p>Hello</p> <p>W3School</p> </div>

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

normal | reverse | inherit

normal是默认值，按照HTML文档里的结构的先后顺序依次展示， 如果box-direction 设置为 normal，则结构顺序还是 id为p1元素，id为p2元素。

reverse: 表示反转。如果设置reverse反转，则结构排列顺序为 id为p2元素，id为p1元素。如下代码：