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

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

---

前者是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+ */


---

以上的回答應該都是錯誤的，經過測試，在Firefox 41.0.2下，設置div為display: box;和display: flex;有明顯差別。具體解釋說明暫時還沒有找到資料。但實際情況確實如此。

---

在實際的瀏覽器測試中，display: flex 不能完全替代display: -webkit-box。

/*******************************打醬油的分割線*************************************************/

測試環境：iOS 9.3.1 Safari 淘寶網頁版訂單管理頁面

使用display: -webkit-box時

css為：

頁面顯示為：

使用display: flex時

css為：

頁面顯示為：

-------------------------------------update: 2016.07.02---------------------------------------------------

正好這兩天在用flexbox，順手做個總結，回答一下 @Thinking80s的問題。

flexbox是有兩種語法方式的，一種是display: box 和 display: flex及對應的廠商前綴方法。前一種是09年開始實施的，後一種是2012年開始使用的。

display: box 使用可以參考http://www.html5rocks.com/en/tutorials/flexbox/quick/

display: flex 使用可以參考https://css-tricks.com/snippets/css/a-guide-to-flexbox/

兼容性的問題可以參考https://css-tricks.com/old-flexbox-and-new-flexbox/

大寫的注意：Android UC瀏覽器只支持display: box語法。而iOS UC瀏覽器則支持兩種方式（同一家公司的瀏覽器，由於平台不一樣，支持程度還不一樣，也是醉了）。

---

背景：今天用flex柔式布局做手機頁面，在google瀏覽器下模擬各主流設備完美顯示，心情美美的。

為了保證兼容性，我用同事古董級的魅族手機里系統自帶的M牌瀏覽器做最終測試，結果果然有問題，什麼情況呢。

手機碼字上不了代碼截圖，我手寫出來你看下

father {display:flex; display:-webkit-flex; flex-flow:row; -webkit-flex-flow:row; justify-content:space-around; }

child { box-flex:1.0; -webkit-box-flex:1.0; }

因為是純手機頁面，只考慮webkit內核，明明模擬測試的沒問題啊！為什麼在古董機上就不行呢？

後來發現，只要在父容器原代碼中加入 display:-webkit-box; 就可以完美解決。

如果要說區別，display：box； 是老規範，要兼顧古董機子就加上它。

flexbox flex 是新規範，老機子不支持的。

---

因為他們很無聊……flex box flexbox都有……順帶flexbox好像是最新的。

----

好吧，無知的我突然想起來flex才是最新的。沒被人點差評真是萬幸……

---

**沒區別**，僅是各階段草案命名。

- 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/)

**另附W3C制定標準流程：**

工作草案（Working Draft）

最終公示（Last Call）

候選推薦標準（Candidate Recommendation）

提名推薦標準（Proposed Recommendation）

推薦標準（Recommendation）

---

其實要使多瀏覽器兼容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不會。

---

區別很大，形象的來說，是兩種不同的布局模式

---

compass

.row {
@include flexbox((
display: box,
box-orient: vertical
), $version: 1);
@include flexbox((
display: flexbox,
flex-direction: row
), $version: 2);
@include flexbox((
display: flex,
flex-direction: row
));
}


三個版本都有

---

推薦閱讀：