google-chrome - CSS3 flex-direction 属性在 Chrome 21 中失效了吗？

Question

我已经将我的 Chrome 更新到版本 21。我已经使用 flex 属性定义了一些 css 样式:

display: -webkit-flexbox;
-webkit-flex-pack: center;
-webkit-flex-align: center;
-webkit-flex-direction: column;

但是我发现在新版本的 chrome 中所有的东西都失去了效果，所以我尝试更改为:

display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-flex-direction: column;

head 3 属性已正确更改，最后的-webkit-flex-direction还是不能正常工作，但是开发工具显示的chrome属性是正确的

演示是 here ，我想使用属性在列中生成 h1 顺序

我该如何解决这个问题？还是应该添加一些属性？

Answer 1

那是因为 Chrome 21 是第一个使用 new flexbox 的版本模型。

注意:Chrome 29 及更高版本不对 flex 属性使用前缀。

我已经根据您的第一个示例编写了两个实现。我的第一个演示使用 original version在 flexbox 规范中，第二个使用 latest version .
这是一个演示，展示了两者的实际效果:http://jsfiddle.net/dPK5f/2/ ^{(灵活尺寸:http://jsfiddle.net/dPK5f/3/)}

/* The properties are ordered to make it easier to compare them */
#old {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-box-orient: vertical;
}
#flex {
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -webkit-flex-direction: column;
}

另请参阅:https://developer.mozilla.org/en/CSS/Using_CSS_flexible_boxes