Question

Possible Duplicate:
What are the differences between display:box and display:flexbox

I have read a css3 flex-box demo here,the parent element’s style is :

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

Once I change the display: -webkit-flexbox; to display: -webkit-box;, the page layout have changed.

Buy I read some tutorial about the -webkit-flexbox and -webkit-box just is the same syntax.Is that true? Are there some differences between them?

Answer 1

According to this source the specs have changed:

The Working Draft has undergone changes to much of the syntax used in the flexbox model. For example:

display: box; 

This will become:

display: flexbox;

Both versions of the syntax work (at least in chrome). The reason why the layout looks different if you change the display style is because you have to change -webkit-flex-pack: center; to -webkit-box-pack: center; when you use display: -webkit-box;

So this is equivalent to your css style from above and should produce the same layout:

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