首页 > 代码库 > CSS3 display:flex和display:box有什么区别？

CSS3 display:flex和display:box有什么区别？

2024-08-27 16:33:40   226人阅读

**区别**，仅是各阶段草案命名。
- W3C 2009年第1次草案：[display:box;]()
- W3C 2011年第2次草案：[display:flexbox | inline-flexbox;]()
- W3C 2012年第5次草案及以后的候选推荐标准：[display:flex | inline-flex;](https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/)


作者：山茶树和葡萄树
链接：https://www.zhihu.com/question/22991944/answer/96153192
来源：知乎
著作权归作者所有，转载请联系作者获得授权。
 
前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。

后者是2009年的语法，已经过时，是需要加上对应前缀的。

所以兼容性的代码，大致如下

    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有什么区别？


联系
我们