css3中display:box 和display:flex有区别?
发布于 作者 bbq2013 531 次浏览 来自 问答

display:box box-flex 和 display:flex flex 有什么区别?如何兼容大部分主流浏览器


4 回复

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

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

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

display:box浏览器支持:

IEFirefoxChromeSafariOpera
不支持2.0-40.0
(-moz-)
4.0-45.0
(-webkit-)
6.0-8.0
(-webkit-)
15.0-29.0
(-webkit-)

IEFirefoxChromeSafariOpera
11.0+22.0+21.0+(-webkit-)
29.0+
6.1+(-webkit-)
9.0+
15.0+(-webkit-)
17.0+

较为完整的兼容性代码,如下:

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


@asf1988 怎么兼容大部分老版本浏览器呢,好像跟浏览器版本也有关系吧!

应该是制定的语法版本不同吧!

display: box 是 CSS 2009 年的语法,已经过时,需加上对应前缀

display: flex 是 2012 年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本