css3 box-flex 弹性盒模型的应用

我们经常会遇到的，在各种选项卡上，要求选项卡标签是等宽，并平均分配父容器的宽度。
这个时候，通常我们使用百分比来设定各选项卡的宽度。
但是，你会遇到各种不同数量的选项卡，你只能分别为这些选项卡设置不同的百分比宽度，还要为3、6、7 这样不能被100整除的数量的选项卡做特殊的设定。
而使用 css3 box-flex 就会很简单：将父容器设置为 display: -webkit-box，然后给子容器设置一个宽度，比如 width:0，并设置 -webkit-box-flex: 1，那么它们将平均分配父容器的宽度
经测试，box-flex 对表单元素元素无效，此时，你可以在表单元素外添加一个标签，然后将设置表单元素的尺寸为 100%。

有了 box-flex，在大部分使用 float 的场景，你可以不再使用以下属性：
float
margin
vertical-align
width: 50%...

我们来看一下 display 为 box 的容器内的子对象除了 box-flex 外还可以使用的好东西（从网上搜刮而来）：

box-orient
box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有：

horizontal | vertical | inline-axis（默认） | block-axis | inherit

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

normal（默认） | reverse | inherit

box-align
box-align决定了垂直方向上的空间利用，也就是垂直方向上的对齐表现。为了便于记忆，我们可以拿来和CSS2中的vertical-align隐射记忆，两者都有”align”，都是都是垂直方向的对齐；而剩下的box-pack就是水平方向的了。

box的可选参数有：

start | end | center | baseline | stretch（默认）

box-pack
box-pack决定了父标签水平遗留空间的使用，其可选值有：

start（默认） | end | center | justify

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

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

子元素除了box-flex属性，还有两个属性，box-flex-group和box-ordinal-group，其中box-flex- group的作用不详，貌似目前浏览器也不支持；box-ordinal-group的作用是拉帮结派；拉拢的组织团伙是有一个数字级别的，决定了你这个组织的位置。

困扰我们多年的等高布局、垂直居中、左右对齐、尺寸和间距分配……
另外说句，好些功能其实表格早就实现了

摘自链接：http://blog.zol.com.cn/5622/article_5621428.html