display:box 和 display:flex

最新推荐文章于 2024-07-20 17:37:16 发布

不喜欢写代码的程序员大叔

最新推荐文章于 2024-07-20 17:37:16 发布

阅读量637

点赞数

分类专栏： Html

Html 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Flex布局的不同语法版本，包括2009年的display:box、2011年的display:flexbox以及2012年的display:flex，并详细阐述了它们在各浏览器中的支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出处：https://segmentfault.com/q/1010000003497333

只是flex语法规范更新了几个版本:

前者display:box是2009年的语法版本，使用时需要加上浏览器的前缀，不过现在已经过时了。
后者display:flex是2012年最新修正的语法版本，浏览器支持较好，也将成为以后标准的语法。
中间2011年也提出了一个奇葩的语法版本display:flexbox，非官方的，当时主要是为IE浏览器使用。

display:box浏览器支持：

IE	Firefox	Chrome	Safari	Opera
不支持	2.0-40.0 （-moz-）	4.0-45.0 （-webkit-）	6.0-8.0 （-webkit-）	15.0-29.0 （-webkit-）

display:flex浏览器支持：

IE	Firefox	Chrome	Safari	Opera
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+ */
}