CSS3弹性布局-webkit-box用法演示

早期 WebKit 浏览器的弹性布局方案，用的就是 -webkit-box。虽然现在主流都用标准的 flex，但要兼顾旧版本兼容性，这一套老语法你还是得知道点。

用了 display: -webkit-box，容器就变成弹性盒子了，子元素能自动排好队。再配上 -webkit-box-orient 和 -webkit-box-direction，控制方向就没问题了，水平竖直随你选。

对齐方面，主轴用 -webkit-box-pack，交叉轴就用 -webkit-box-align，基本思路和现代 Flexbox 差不多。属性值也挺直观的，center 就是居中，start 靠前，end 靠后，挺好理解。

至于元素能不能拉伸、多大权重，就看 -webkit-box-flex。数值大就占得多，小就少，灵活分配空间挺方便的。

下面这个例子你一看就懂：

.container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}
.box {
  -webkit-box-flex: 1;
  background-color: #f00;
  margin: 10px;
}

三块盒子垂直居中排列，均分高度。结构简单，样式也清晰，适合老项目维护时用上。

不过新项目就别再上 -webkit-box 了，用标准 flex 语法更靠谱。如果你在做旧代码适配，或者维护遗留项目，这篇还蛮值得看一眼的。