CSS3 display:flex和display:box有什麼區別？

標籤：inline   container   round   tab   定義   contain   大致   webkit   ack   

**區別**，僅是各階段草案命名。
- W3C 2009年第1次草案：[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
- W3C 2011年第2次草案：[display:flexbox | inline-flexbox;](https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)
- 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有什麼區別？