display:box和flex的区别

没区别，仅是各阶段草案命名。

flex是最新的，但是在实际的浏览器测试中，display: flex 不能完全替代display: -webkit-box

display: box 使用可以参考http://www.html5rocks.com/en/tutorials/flexbox/quick/
display: flex 使用可以参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/
兼容性的问题可以参考https://css-tricks.com/old-flexbox-and-new-flexbox/
Android UC浏览器只支持display: box语法。而iOS UC浏览器则支持两种方式
需要注意的是如果要使用line-clamp时需要用display:box;

下面介绍下两者的语法：

• flex的语法可以查考这篇博客
• box的语法如下，博客地址：

Flexbox 为 display 属性赋予了一个新的值（即 box 值）, flexbox的属性有很多，记录一些比较常用的属性：

用于父元素的样式：

display: box; 该属性会将此元素及其直系子代加入弹性框模型中。（Flexbox 模型只适用于直系子代）

box-orient: horizontal | vertical | inherit; 该属性定义父元素的子元素是如何排列的。

box-pack: start | end | center | justify; 设置沿 box-orient 轴的父元素中子元素的排列方式。因此，如果 box-orient 是水平方向，则父元素的子元素是水平的排列方式，反之亦然。（表示父容器里面子容器的水平对齐方式–垂直排列时–定宽）

box-align: start | end | center | baseline | stretch; 基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的，该属性就会决定垂直排列，反之亦然。（表示父容器里面子容器的垂直对齐方式–水平排列时–定高）

用于子元素的样式：

box－flex: 0 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分。