《CSS3实战》笔记--弹性盒模型（一）

通过阅读和学习书籍《CSS3实战》总结
《CSS3实战》/成林著.—北京机械工业出版社2011.5

弹性盒模型（Flexible Box Moudle），该模型用于决定元素在盒子中的分布方式以及处理盒子的可用空间。这与XUL（Firefox浏览器的用户交互语言）相似，其他语言也使用相同的盒模型。如XAML，GladeXML等。通过弹性盒模型，可以轻松地创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

兼容性：：弹性盒模型规范是W3C标准化组织于2009年发布的，目前还没有主流浏览器对其进行支持，不过采用Webkit和Mozilla渲染引擎的浏览器都自定义了一套私有属性，用来支持弹性盒模型。

• 采用Webkit渲染引擎的浏览器主要包括Safari和Chrome浏览器，该引擎支持以-webkit为前缀的私有属性。

• Mozilla渲染引擎的浏览器主要包括Firefox浏览器，该引擎支持以-moz为前缀的私有属性。

相关属性：
box-align：定义子元素在盒子垂直方向上的空间分配方式
box-direction：定义盒子的显示顺序
box-flex：定义子元素在盒子内的自适应尺寸
box-flex-group：定义自适应子元素群组
box-lines：定义子元素分列显示
box-ordinal-group:定义子元素在盒子内的显示位置
box-orient:定义盒子分部的坐标轴
box-pack：定义子元素在盒子内水平方向的空间分配方式

box-orient属性

  该属性可用于定义盒子元素内部的流动布局方向.在使用弹性盒子模型时，需要先把父容器的display属性设置为box或者inline-box。
语法：

box-orient：horizontal | vertail | inline-axis | block-axis | inherit

取值简单说明：

• horizontal：盒子元素从左到右在一条水平线上显示它的子元素。

• vertail：盒子元素从上到下在一条垂直线上显示它的子元素。

• inline-axis：盒子元素沿着内联轴显示它的子元素。

• block-axis：盒子元素沿着块轴显示它的子元素。

实战体验：设计多栏布局

• html代码：

<div id="box">
    <div id="box0"><img src="images/web_01.gif" /></div>
    <div id="sub-box">
        <div id="box1"><img src="images/web_02.gif" /></div>
        <div id="box2"><img src="images/web_03.gif" /></div>
        <div id="box3"><img src="images/web_04.gif" /></div>
    </div>
</div>

• CSS3代码：

<style type="text/css">
body