html5 - display:box 和 display:flex 两者区别 ？

Question

想听大家的说法，不要copy了。

Answer 1

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