如何使用可伸缩框属性（Flexible Box）

1、box-align代码。通过这个代码让外框内所有的元素进行一个对齐的操作。对齐方式与浏览器的名称需要定义一下的。

/* Firefox */display:-moz-box;-moz-box-pack:center;-moz-box-align:center;

2、box-direction。有了这个代码之后，我们就可以让外框内的子元素有了自己的显示方向。不同的浏览器代码不同，方向非常简单，正向或者反向。

/* Firefox */display:-moz-box;-moz-box-direction:reverse;

3、box-flex。这个代码主要是规定框内的不同元素是不是具备了伸缩的资格。当内容多时变大，当内容少时变小。使用时应注意浏览器的名称。

#p1{-moz-box-flex:1.0; /* Firefox */-webkit-box-flex:1.0; /* Safari 和 Chrome */box-flex:1.0;border:1px solid red;}

4、box-ordinal-group。这个代码就是指框内元素很多时候，各个元素的显示次序。代码同样受到不同浏览器的限制。

.ord1{margin:5px;-moz-box-ordinal-group:1; /* Firefox */-webkit-box-ordinal-group:1; /* Safari 和 Chrome */box-ordinal-group:1;}

5、box-orient。这个代码也是很好理解的，它规定了框内各个元素的排列状态，是水平线还是垂直线，当然默认就是水平的。

/* Firefox */display:-moz-box;-moz-box-orient:horizontal;

6、box-pack。这个代码在框与元素之间发生作用的，让元素垂直于框中或者让元素水平于框中。

/* Firefox */display:-moz-box;-moz-box-pack:center;-moz-box-align:center;