css3学习 理论之弹性盒模型

弹性盒模型，该模型用于决定元素在盒子中的分布方式以及如何处理盒子的可用空间。有了他，咱们就可以轻松创建自适应浏览器窗口的流动布局或者自适应字体大小的弹性布局。

其属性有：

box-align，定义子元素在盒子内垂直方向上的空间分配方式。

box-pack，定义子元素在盒子内水平方向上的空间分配方式。

box-direction，定义盒子的布局顺序。

box-orient，定义盒子的布局取向。

box-ordinal-group，定义盒子布局的位置。

box-flex，定义盒子的弹性空间。

box-lines，空间溢出管理。

下面就一一对其解释。

box-orient，定义盒子元素内部的流动布局方向，父容器的display设置为box或者inline-box。其值可以是horizontal:盒子元素从左到右在一条水平线上显示他的子元素；vertical:盒子元素从上到下在一条垂直线上显示他的子元素；inline-axis：盒子元素沿着内联轴显示他的子元素；block-axis:盒子元素沿着块轴显示他的子元素。

box-direction，改变盒子元素中内部元素的流动顺序，其值可以是normal:正常顺序显示；reverse：反向显示；inherit：继承上级元素的显示顺序。

box-ordinal-group，可以设置每一个子元素在盒子中的具体显示位置，他的值是自然数，从1开始，根据该值的大小进行排序。

box-flex，该属性在弹性布局中绝对的好使啊，他的取值是一个整数或者小数，当盒子中定义了多个box-flex时，浏览器将会把这些子元素的box-flex值相加，然后计算他们各自所占的比例来分配空间，但是他只能在盒子拥有固定的空间大小之后才能够正确解析。

box-pack，他的值可以是start：显示在盒子的左侧，富余空间显示在右侧；end：显示在盒子的右侧，富余空间显示在左侧；center：平均分配；justify：富余的空间在子元素之间平均分配。

box-align，他的值可以是start：沿着盒子的上边缘排序；end：沿盒子的下边缘排序；center：上面一半，下面一半；baseline：所有盒子沿着他们的基线排列，富余空间可前可后显示；stretch：每个子元素的高度被调整到适合盒子的高度显示。

box-lines，其取值可以使single：所有子元素都单行或者单列显示；multiple：所有子元素可以多列或者多行显示。不过目前并没有浏览器支持这一属性。