display：-webkit-box和display:flex的区别

他们的区别以及各自应用的场景和兼容性？

慕粉083738684 2017-07-26

源自：响应式布局 3-2 响应式布局实战(二)

107

收起

4回答

怎么都被占用了呢 2017-11-06 14:02:33

使用哪种方式，就使用对应它的属性呗。还有display:box是2009年的语法版本，display:flex是2012年最新修正的语法版本。不要弄混了哦

收起回答

怎么都被占用了呢 2017-07-29 16:32:59

为了更好的兼容性，建议都写上。

收起回答

提问者慕粉083738684 2017-07-29 15:00:06

比如：flex的主轴方向属性是flex-direction；对齐属性justify-content：center；align-items:center;

而box得主轴方向属性是box-origin;对齐属性是box-pack;box-align;

.box { 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+ */

这里面是写flex-direciton；justify-content;align-items属性？

还是写box-origin;box-pack;box-align;等属性？

还是都写上？

}

收起回答

卡布琦诺 2017-07-27 11:08:53

display:box是2009年的语法版本，使用时需要加上浏览器的前缀，即-webkit-box、-moz-box等；display:flex是2012年最新修正的语法版本，浏览器支持较好，也将成为以后标准的语法。一般为了更好的兼容我们这样写：

.box {    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+ */
}

希望可以帮到你！

收起回答

提问者慕粉083738684 #1

我看了下，他们属性的写法不一样，flex的主轴方向属性是flex-direction，而box是box-orient，如果这样写的话，那相关属性的写法要具体怎么写？

2017-07-27 16:19:28
卡布琦诺回复提问者慕粉083738684 #2

不知道你指的是怎样的相关属性，希望可以详细描述一下

2017-07-27 17:41:21
慕瓜9363615 #3

同问就是，那原来的flex-direction 也得改成 box-orient 的意思吗，一一对应

2017-11-06 11:52:10