CSS 屬性 display 取值 box 和 flexbox 以及 flex 有什麼不同，分別表示什麼？
今天在做手機web站的時候使用到盒型布局 這三個參數很模糊，通常要一個一個試才知道哪個管用，有知道高人可以指點一二么？不勝感激啊~....
瀉藥。
這種 Google 一下就能找到的問題真心不建議來知乎提問。
不同的寫法是對應不同時期的 Flex 規範，強烈建議使用 autoprefixer 自動增加前綴，在開發的時候只寫標準屬性「display:flex」，然後通過插件自動生成前綴。
各個寫法的兼容性如下：
.foo{
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+ */
}
CSS 的發展是這樣的，一邊是社區在討論如何定義規範，另一邊是瀏覽器廠商逐步給出符合當前規範的實現，社區再反過來看看規範在實際使用中還有什麼不完善的或者不合理的地方，然後去進行修正。
由於 CSS 傳統的布局手段很難完全滿足現代網站的需求，所以有了 flex 布局。人們經過討論誕生了第一個版本以後，就有瀏覽器率先實現了 `display: box` 及相關的其他功能。
而大家發現這一版仍然不是很讓人滿意，於是再討論一番又更新了一版。但是之前已經有網站按老的規範用上了 `display: box` 呀，你這一改不是亂了么，那我們改個名字叫 `flexbox`，寫這個名字的我知道他要用新規範。後面的 `flex` 也是同理。
而對於瀏覽器，一般來說老的實現是不會刪除的，但這也不能保證。不同瀏覽器可能會實現 flex 布局的不同版本。
簡單來說，他們其實是一個東西，只是由於兼容性的考慮，所以都被保留了下來。"Old" Flexbox and "New" Flexbox
If you Google around about Flexbox, you will find lots of outdated information. Here"s how you can quickly tell:
- If you are looking at a blog post (or whatever) about Flexbox and you see display: box; or a property that is box-{*}, you are looking at the old 2009 version of Flexbox.
- If you are looking at a blog post (or whatever) about Flexbox and you see display: flexbox; or the flex() function, you are looking at an awkward tweener phase in 2011.
- If you are looking at a blog post (or whatever) about Flexbox and you see display: flex; and flex-{*} properties, you are looking at the current (as of this writing) specification.
很好懂就不翻譯了。
Can I use... Support tables for HTML5, CSS3, etc
看仔細了，原文：CSS box-flex屬性，然後彈性盒子模型簡介 ? 張鑫旭
除了firefox，chrome safari opera 等瀏覽器對舊版支持已經很好了，舊版就是display: -webkit-box/-moz-box/box；混合版本是針對IE10的，display:-ms-flexbox；還有現代版，display:flex。
如果要使用line-clamp屬性也需要用display:box
據扯，box是先出來的，flex後出，現在主要用flex。
但是box有一個特性是flex沒有的，文字可以垂直居中~
推薦閱讀：