end ：所有子容器都分布在父容器的右侧，左侧留空
justify ：所有子容器平均分布（默认值）
center ：平均分配父容器剩余的空间（能压缩子容器的大小，并且有全局居中的效果）
box-align 属性规定如何对齐框的子元素。
语法
复制代码
box-align: start|end|center|baseline|stretch;
start ：子容器从父容器顶部开始排列
end ：子容器从父容器底部开始排列
center ：子容器横向居中（有点奇怪）
baseline ：所有子容器沿同一基线排列（很难理解）
stretch ：所有子容器和父容器保持同一高度（默认值）
box-flex 属性规定框的子元素是否可伸缩其尺寸。
语法
box-flex: value;
看下面一个实例：
复制代码
<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>
与传统的盒模型一样，overflow属性用来决定其显示方式。为了避免溢出，你可以设置box-lines为multiple使其换行显示。
flex: initial
一个 flex 属性值被设为 initial 的伸缩项目，在有剩余空间的情况下不会有任何变化，但是在必要的情况下会被收缩。
复制代码
flex: auto
一个 flex 属性值被设为 auto 的伸缩项目，会根据主轴自动伸缩以占用所有剩余空间。
auto 目前仅在 Opera 12.11 尚有效，在 Chrome 23.0.1271.95 上无效。你可以通过使用 flex: 1; 来达到一样的效果。
flex: none
一个 flex 属性值被设为 none 的伸缩项目，在任何情况都不会发生伸缩。
先了解到这里吧，之后的再深入学习便会陆续更新。不得不说css3的弹性盒模型为前端开发者带来了福音，让烦人的浮动见鬼去吧……
