弹性盒布局

• 使用自适应窗口的弹性盒布局 ordinal-group

如何才能让DIV的宽度跟随浏览器窗口变化而变换？在CSS3中我们只要使用一个box-flex属性，使得我们的盒布局变成弹性盒布局就可以了。

兼容性写法：

        -webkit-box-ordinal-group （Safari浏览器、Chrome浏览器时前面加-webkit-）

        -moz-box-ordinal-group （Firefox浏览器时前面加-）

• 改变元素的排列方向 box-orient

在使用弹性盒布局的时候，可以通过box-orient来指定多个元素排列方向。

值：

        horizontal 在水平中从左向右排列子元素。

         vertical从上向下垂直排列子元素。

兼容性写法：

        -webkit-box-orient：vertical

        -moz-box-orient：vertical

• 元素的宽度与高度自适应

在使用盒布局的时候，元素的宽度与高度具有，就是元素的宽度与高度可以根据排列方向的改变而改变。

• 使用弹性盒布局来消除空白  box-flex

方法就是给予DIV中加入一个box-flex属性

• 对多个元素使用box-flex属性

让浏览器或容器中的元素的总宽度或者总高度都等于浏览器或者是容器的高度。

方法是对多个元素使用box-flex属性。

• 指定水平方向与垂直方向的对齐方法

使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中的文字、图像及子元素的水平方向或者垂直方向上的对齐方式

兼容性写法：

        -webkit-box-pack：值（Safari浏览器、Chrome浏览器时前面加-webkit-）

        -moz-box-pack：值（Firefox浏览器时前面加-moz-）

        -webkit-box-align：值（Safari浏览器、Chrome浏览器时前面加-webkit-）

        -moz-box-align：值（Firefox浏览器时前面加-moz-）

属性值	box-pack属性值的含义	box-align
start	左对齐，文字、图像或子元素被放置在元素最左边	顶部对齐，文字、图像或子元素被放置在元素最顶部
center	中对齐，文字、图像或子元素被放置在元素中部	中部对齐
end	右对齐	底部对齐

• 指定水平方向与垂直放心的对齐方式

转载于:https://my.oschina.net/u/2672206/blog/707822