display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */如果要说区别，display：box； 是老规范，要兼顾古董机子就加上它。
flexbox flex 是新规范，老机子不支持的。
其实要使多浏览器兼容flexbox容器样式，可以使用如下CSS样式进行定义： .flex-container { display: -moz-box; /* Firefox */ display: -ms-flexbox; /* IE10 */ display: -webkit-box; /* Safari */ display: -webkit-flex; /* Chrome, WebKit */ display: box; display: flexbox; display: flex; width: 100%; height: 100%; background-color: gray; }
父元素设置display:flex后，子元素宽度会随父元素宽度的改变而改变，display:box不会。
CSS3 display:flex和display:box有什么区别？
原文：http://www.cnblogs.com/Trr-984688199/p/6189338.html