下面的这一段css代码是什么意思？

Question

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;

  -ms-flex-wrap: wrap;
      flex-wrap: wrap;

-webkit-box-pack: center;
-webkit-justify-content: center;

  -ms-flex-pack: center;
      justify-content: center;

-webkit-box-align: center;
-webkit-align-items: center;

  -ms-flex-align: center;
      align-items: center;
      
      另外前两行又是什么意思？

Answer 1

都是各种兼容性前缀. 用 autoprefixer 等工具可以自动生成此类代码. 核心代码是:

display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;

这些代码的含义, 可以参看: http://www.ruanyifeng.com/blo...

Answer 2

webkit是chrome内核的兼容前缀
ms是IE内核的兼容前缀
moz是火狐内核的兼容前缀
o是opera内核的兼容前缀（opera现在的版本好像也用chrome内核了）