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

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

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

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

在文档流中，DIV的高度默认就是根据内容的高度自适应的。

如果是想适配不同设备的窗口大小，可以设置百分比。或者通过position定位，然后设置top和bottom值。再或者利用css3的flexbox布局，设置父级的display为flex，方向为纵的，然后设置其flex：1；

解决办法，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  没有完善的原因。

---