css - css3 中 display:box 和 display:flexbox 有什么区别

Question

可能重复：
display:box 和 display:flexbox 有什么区别

我在这里阅读了一个 css3flex-box 演示，父元素的样式是：

  .flexbox {
    display: -webkit-flexbox;    
    -webkit-flex-pack: center;
    -webkit-flex-align: center;
    width: 50%;
    height: 100px;
    background: orange;
  }

一旦我将 更改display: -webkit-flexbox;为display: -webkit-box;，页面布局就发生了变化。

购买 我阅读了一些关于-webkit-flexboxand -webkit-boxjust is the syntax.的教程。是这样吗？它们之间有什么区别吗？

Answer 1

根据此来源，规格已更改：

工作草案对弹性盒模型中使用的大部分语法进行了更改。例如：

display: box; 

这将变成：

display: flexbox;

两个版本的语法都有效（至少在 chrome 中）。更改样式后布局看起来不一样的原因display是因为您必须更改-webkit-flex-pack: center;为何-webkit-box-pack: center;时使用display: -webkit-box;

所以这相当于你上面的css样式，应该产生相同的布局：

.flexbox {
    display: -webkit-box;    
    -webkit-flex-box: center;
    -webkit-flex-box: center;
    width: 50%;
    height: 100px;
    background: orange;
  }