旧版WebKit需用display: -webkit-box配合-webkit-box-pack和-webkit-box-align实现居中，二者必须同时设置且声明在flex之前，取值仅支持start/end/center/justify，无space-between等现代值。
旧版WebKit用-webkit-box实现居中必须写两套声明
现代display: flex在旧版Safari（≤6.1）、Android 4.3及更早Chrome中根本不可用，必须降级到display: -webkit-box。但光写这一句没用——它只启动弹性模型，不自动居中。你得手动配-webkit-box-pack和-webkit-box-align，且这两个属性必须同时存在才生效。
常见错误是只写-webkit-box-pack: center以为就能水平居中，结果发现子元素还是贴左。因为-webkit-box-pack只管主轴（默认水平），而垂直方向完全没控制；同理，只写-webkit-box-align也只会让元素上下对齐，左右仍按文档流排。
-
display: -webkit-box必须加在父容器上，子元素不能加 - 主轴方向默认是
horizontal，若要垂直居中需先设-webkit-box-orient: vertical - 如果父容器没设固定高度，
-webkit-box-align: center可能失效（子元素会撑高容器而非居中）
-webkit-box-pack和-webkit-box-align的取值不是完全对应现代flex
旧版box模型的对齐逻辑更原始：它把父容器当成一个“盒子”，-webkit-box-pack决定子元素在主轴上的分布方式，-webkit-box-align决定在交叉轴上的对齐基准线。注意它们的值命名和现代flex不同：
-
-webkit-box-pack: center≈justify-content: center（主轴居中） -
-webkit-box-align: center≈align-items: center（交叉轴居中） - 没有
space-between或stretch这种高级值，只有start/end/center/justify -
justify在-webkit-box-pack里是“两端对齐”，但在-webkit-box-align里无效（会被忽略）
兼容现代浏览器时，display声明顺序不能乱
为兼顾新旧浏览器，必须把-webkit-box写在flex前面，否则旧版WebKit会直接忽略后面的display: flex并导致整个布局崩掉。CSS解析是顺序覆盖的，浏览器遇到不认识的值就跳过，所以正确顺序是：
立即学习“前端免费学习笔记（深入）”；
display: -webkit-box; display: flex;
同样，对齐属性也要按前缀优先原则排列：
-webkit-box-pack: center; -webkit-box-align: center; justify-content: center; align-items: center;
漏掉-webkit-前缀，在iOS 6 Safari里就是白屏；多写了但顺序反了，新浏览器会用错值。
真正麻烦的是那些需要同时支持IE10（display: -ms-flexbox）和老iOS的项目——这时你得塞三套声明，而且-ms-的flex-align和-webkit-的box-align行为还不完全一致。实际项目里，能砍掉iOS 6支持就别硬扛。
