html5中的 display:inline-flex; 和 display: flex;有什么区别？

html-css014

html5中的 display:inline-flex; 和 display: flex;有什么区别？,第1张

前者display:box是2009年的语法版本，使用时需要加上浏览器的前缀，不过现在已经过时了。

后者display:flex是2012年最新修正的语法版本，浏览器支持较好，也将成为以后标准的语法。

中间2011年也提出了一个奇葩的语法版本display:flexbox，非官方的，当时主要是为IE浏览器使用。

解决办法，CSS代码修改如下：

#col2{ 

  background:#F63

  box-flex:1

  -webkit-box-flex:1

  -moz-box-flex:1

  width: 0%           /* 加上这行代码 */

} 

#col3{ 

  background:#690

  box-flex:3

  -webkit-box-flex:3

  -moz-box-flex:3

  width: 0%           /* 加上这行代码 */

}

所有需要按照比例分解的列，都加上 width: 0%已经有固定值的列不需要加，原理不懂。

反正这个应该是CSS3新属性  box-orient  没有完善的原因。