网页布局之》》》》弹性盒子》》》

网页弹性盒子》》》》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