Chrome 21中的CSS3 flex-direction属性丢失效果？

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;

头3属性已经纠正,最后-webkit-flex-direction仍然不像以前那样工作,但是chrome开发工具显示属性是正确的

demo就在这里,我想使用属性h1在列中进行排序

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

Answer 1

这是因为Chrome 21是第一个使用新的flexbox模型的版本.

注意:Chrome 29及更高版本不会为flex属性使用前缀.

我根据你的第一个例子编写了两个实现.我的第一个演示使用了原始版本的flexbox规范,第二个演示使用了最新版本.
这是一个演示,其中显示了两个实际操作: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