网页弹性盒子》》》》box-flex 属性  按比例占据父元素的尺寸。

1，（纵向）水平方向的弹性布局：

先给其父元素设置样式为弹性盒子display:box;

#father{

display:-webkit-box;

display: box;

}

 》》》》》》》子元素（div或盒子）默认是纵向挨着排列的，。》》》》》》

定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素，则 #p1 的宽度是 100 像素，而 #p2 的宽度是 200 像素：

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

2  竖直方向的弹性布局

先给其父元素设置样式为弹性盒子display: box;

#father{

display: -webkit-box;

display: box;

/*规定弹性布局的方向（默认方向是水平方向）*/

-webkit-box-orient: vertical; //这是竖直方向的

/*f反向布局*/

-webkit-box-direction: reverse;

}

3 box-align 属性规定如何对齐框的子元素。

>>>>>>>来自《w3school》

    一般 box-align box-pack配合一起用

语法 box-align: start|end|center|baseline|stretch（默认值）;

值	描述	测试
start	对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。 对于反方向的框，每个子元素的下边缘沿着框的底边放置。	测试
end	对于正常方向的框，每个子元素的下边缘沿着框的底边放置。 对于反方向的框，每个子元素的上边缘沿着框的顶边放置。	测试
center	均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。	测试
baseline	如果box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。	测试
stretch	拉伸子元素以填充包含块

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》来自《w3school》

4 box-pack 属性规定当框大于子元素的尺寸，在何处放置子元素。 >> w3school

通过一起使用 box-align 和 box-pack 属性，对 div 框的子元素进行居中：    

语法  box-pack: start|end|center|justify;

值描述测试start

对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间）

对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）

测试end

对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。

对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。测试

center均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后测试

justify在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。测试

弹性盒子中的box-align ,box-pack,的对齐方式问题 要受到box-orient:(默认为horizontal水平) vertical垂直，的影响。

 以上总结大量借鉴w3school ；；

更详细介绍》》鑫哥博客：http://www.zhangxinxu.com/wordpress/?p=1338