理解CSS3新特性-弹性盒子模型

无奈真正关于HTML5和CSS3方面的东西真是少之又少，总是上各个论坛里去淘宝，不过新的东西在中文网上还是颇少，需要去一些外文网站上淘了，抑或是期待谁发现翻译过来！

这是CSS3的新特性，它为开发者提供了一种非常灵活的布局方式，但是理解它确实需要花点功夫。
目前支持这一特性的浏览器仅有webkit内核的safari和chrome以及gecko内核的firefox，这一点也是比较头疼，因为我们不能够在我们的项目中灵活的使用它，但当你要针对移动平台（iphone、android、ipad、itouch、ipod）进行web项目的开发时，可以灵活的使用它。
实际上即便它在gecko内核（FF）和webkit内核（Chrome,safari）中可以得到良好的支持，但是它们表现出来的视觉效果却是不一样的（见下图）。
      
CSS3的box-flex是如何工作的呢？
现今，在开发WEB站点时会遇见设计师的作品有很多的布局类似于报纸的排版，当然我们可以通过CSS2的float属性实现它（例如以下代码），但是CSS2在设计之初并没有添加多列布局的属性。

       .left{float:left;}
       .right{float:right;}
      .clear{clear:both;}
开始使用新的方式布局你的盒子
CSS3灵活的盒子模型表面的非常优美，真的无法用文字来把她描述的很清晰
HTML：

       <div class="container">
           <div class="blue"> 1</div>
          <div class="blue"> 2 </div>
          <div class="blue"> 3</div>
          <div class="blue">4</div>
      </div>
CSS：

    .container {
            width: 1000px;
            display: -webkit-box;
            display: -moz-box;
            -webkit-box-orient: horizontal;
             -moz-box-orient: horizontal;
        }
      .blue {
             background: #357c96;
             font-weight: bold;
             margin: 2px;
             padding: 20px;
             color: #fff;
             font-family: Arial, sans-serif;
           }
怎么样？很简单的实现了CSS3的盒子模型布局。你可以忽略.blue类名，.container容器定义了diaplay属性的值为盒子，然后设置了盒子适应于水平方向， 这样的话看起来应该是这个样子（见下图）


当然，你也可以设置box适应于vertical，如果设置了适应于垂直方向，那个所有的盒子将垂直显示在容器中。

box-direction是用来确定子元素的排列顺序，可选值有：normal | reverse | inherit

其中normal是默认值，表示按照正常顺序排列。所谓正常顺序，就是我们看书写文字的顺序，从左往右，由上至下，先出现的元素，就上面或是左边。而reverse表示反转

弹性的盒子
你大概已经想到这些盒子元素的结构是这个样子的：

正如你看到的一样，在最后一个盒子后面有一些间隙（呵呵，这正要说到CSS3盒子模型的强大之处），
你可能有一些花招来填充完后面的间隙，但是在CSS3盒子模型中你可以指定其中一个盒子的灵活性，以便拉伸该盒子的大小来填充剩余的空白区域。

      .flexible {
             -webkit-box-flex: 1;
             -moz-box-flex: 1;
      }

如果我们增加了一个flexible类名到第三个盒子，那么你将看到这样的一个效果：

哇噻！剩余的空间居然被第三个盒子完全填充了，为什么呢？因为我们为第三个盒子添加了box-flex属性，那么它的父元素剩余的间隙将分配到这个盒子，假如我们又为第二个盒子增加了box-flex属性，那么剩余的间隙将平均分配到这两个盒子。

如果你的数学比较好的话，你可能很快的算出第二个盒子和第三个盒子的比例应该是剩余空间除以2之后的1:1的比例。有点不理解么？好的，继续读下去。
举个例子：如果剩余空间有500像素，那么这两个box-flex为1的元素将获取500/2的额外空间，同样，如果第一个盒子的box-flex设置了3，那么它将获取3：1的额外空间（也就是300像素），而另外一个元素将获取200像素的额外空间。
牛逼吧！这个属性将允许你轻松的根据你的需要扩展你的盒子。
盒子的方向
方向也是CSS3盒子模型的一个关键。我们修改以上的例子，我们可以翻转这四个盒子的排序（从1、2、3、4翻转到4、3、2、1）

       -webkit-box-direction:reverse;
你还可以使用box-ordinal-group来改变每个盒子的位置。
简单的说就是一个盒子的box-ordinal-group属性值越高，那么它就排在最后。如果设置了box-direction为reverse，那么它将在左手边，反之则在右手边。

       -moz-box-ordinal-group: 2;
       -webkit-box-ordinal-group: 2;
盒子的对齐方式

盒子的对齐方式相当简单。有两种方式实现它：1、box-align；2、box-pack。

box-align的可选参数有：start | end | center | baseline | stretch

box-pack可选值有：start | end | center | justify

box-align与box-pack都是决定盒子内部剩余空间怎么使用的。在行为效果上就是表现为“对齐”，这跟Adobe的软件中的一些“对齐”是一致的

如果你的盒子父元素设置了box-orient为水平方向，那么box-align将作用于垂直方向，反之则作用于水平方向。

box-pack完全是对立的，当盒子父元素box-orient为水平方向时，它作用于水平方向，当盒子父元素box-orient为垂直方向时，它作用于垂直方向.
使用任何一种方式设置它的属性值为center时，将能够确保你的盒子处在父元素中的中间。

box-lines
box-lines是用来决定子元素是可以换行显示呢？还是就算挤出油还是单行显示。两个可选值：single | multiple

其中single是默认值，表示死活不换行

设置box-lines:multiple后，就多行显示了，但是浏览器的支持程度是不同的