相信很多人在进行页面布局的时候，经常会使用到float,margin,padding等布局元素，并为了调整细节烦不胜烦，CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)为大家带来了不一样的新体验。
一 基本介绍
下面我们先来个样例，使用方式如下：
{
display:-webkit-box;
display:-moz-box;
display:box;
}
貌似inline-box也可以。另外我们要注意浏览器间的私有属性兼容，这真是无奈的问题。为了简单，下面我只写webkit内和浏览器的写法。
当你把一个有效地html框标签设置该样式后，其内部的元素就将遵循和布局模式。你就可以定制你的盒模型具体展现形式了，下面介绍几个有用属性：
- -webkit-box-orient
box-orient属性用于设置盒模型内部元素的排列方式，详细如下：
- inline-axis：从左向右排列（默认值）
- horizontal：水平排列
- vertical：垂直排列
- block-axis：从上向下排列
- -webkit-box-sizing
box-sizing属性用于改变容器的盒模型组成方式
- content-box: 此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content}
- border-box: 此值改变css2.1盒模型组成模式，content|border|padding {element width=content}
- -webkit-box-direction
box-direction 属性用于改变容器的显示顺序,使之反向排列。默认的情况下，block 级元素是按照加载顺序从上到下排列， inline 级元素是从左到右排列的。下面来看看box-direction：
- reverse：block 级元素显示在最顶部，最后加载的 inline 级元素显示在左边
- -webkit-box-pack
box-pack 属性可以用于设置子容器在水平框中的水平位置，以及垂直框中的垂直位置，它共有四种可能值：start，end，justify 和 center。这些值的含义如下：
- start ：所有子容器都分布在父容器的左侧，右侧留空
- end ：所有子容器都分布在父容器的右侧，左侧留空
- justify ：所有子容器平均分布（默认值）
- center ：平均分配父容器剩余的空间（能压缩子容器的大小，并且有全局居中的效果）
- -webkit-box-align
box-align 属性用于规定如何对齐框的子元素。，共有五个值：start，end，center，baseline 和 stretch。
- start ：子容器从父容器顶部开始排列
- end ：子容器从父容器底部开始排列
- center ：子容器横向居中（有点奇怪）
- baseline ：所有子容器沿同一基线排列（很难理解）
- stretch ：所有子容器和父容器保持同一高度（默认值）
二 浏览器支持情况
这张图可以清楚地看出来，ie和opera就别想了，chrome和firefox和safari很给力。更让人惊喜的是目前的主流智能移动设备操作系统Android和ios的内嵌浏览器对其也有不错的支持。对移动开发来说这真是太美好了，至少对于饱受float，padding折磨的我来说是这样的。
三 对应的子元素样式
-webkit-box-flex
当父元素设定成盒模型显示后，其子类型就可以水平或者垂直弹性分布了。你可以设置成固定的 宽度（高度）来显示子元素，css3还为我们提供了一个自动分配空间的属性：-webkit-box-flex。他可以将父元素的可用空间平均分配空间：例：
<div style="display:-webkit-box;border:1px solid #ccc; width:500px;height:50px;"> <div style="-webkit-box-flex:1;background-color:#0f0"></div> <div style="-webkit-box-flex:2;background-color:#f00"></div> <div style="width:100px;background-color:#0f0"></div> </div>
