display:box; 是老语法，display:flex;是新语法。flexbox是只有ie10才有的语法，ie11可以用flex。

box支持的浏览器更多，flex旧版本浏览器不支持。

综合写法

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

仅仅只有5条，注意：没有box也没有-moz-flex和-o-flex

说一下高度自适应

如图上下两部分，上面部分适应内容的高度，下面部分填充剩余部分。

当下面内容不够时，在下面部分出现滚动条

html部分

<div id="all"><div id="header"><p>123</p><p>123</p></div><div id="main"><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p></div>
</div>

CSS部分

*{margin:0;padding:0;}
html,body{height:100%;}
#all{width:100%;/*第4个坑*/height:100%;display:-moz-box; display:-webkit-box; display:-ms-flexbox;/*display:-webkit-flex;*//*第1个坑*/display:flex;-moz-box-orient:vertical;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;overflow:hidden;/*第2个坑*/background:#000;
}
#header{overflow:auto;/*用于固定高度的情况*/flex-shrink:0;/*第3个坑*/background:#fcc;
}
#main{overflow:auto;display:-moz-box;/*第5个坑*/-moz-box-orient:vertical;/*第5个坑*/-moz-box-flex:1;-webkit-box-flex:1;-ms-flex:1;flex-grow:1;background:#ccf;
}

1.实际上-webkit-flex的高度适应有问题，不如不要，然后降级成-webkit-box

2.-webkit-box内部内容超出出现滚动条时，实际占用的体积没有被截取，导致出现2重滚动条，外层加上overflow:hidden可以解决。

3.注意头部份有flex-shrink

flex-shrink属性指定了flex元素的收缩规则，0表示不可收缩，默认值：1。

但是在flex-grow(box-flex)未设置时，大部分浏览器都不可收缩，部分浏览器会收缩。所以要设置为0才能保证兼容。

4.-moz-box不像block，宽度不会占满，所以要width:100%

5.在-moz-box中，子元素也要-moz-box才能自适应。为了看起来像普通的block所以加上-moz-box-orient:vertical。

6.在-moz-box中，内部只能继续box布局，无法使用position:absolute，position:absolute定位会相对于文档。