靈活的盒子模型 - 顯示器：flex，box，flexbox？

Question

今天我們很多人都知道，在CSS3中引入了新的靈活盒模型之后， inline和block等display屬性的舊值已經過時了。 但是，我們可能會在同一個靈活的盒子模型中找到網絡上的不同信息。

我們可能會發現display屬性的3個不同值，即flex ， box和flexbox 。 這三個靈活的盒子模型和使用哪一個有什么區別？

Answer 1

您可以使用您需要支持的瀏覽器所需的任何一個。

display: box

• Firefox 2.0？ （前綴）
• Chrome 4.0？ （前綴）
• Safari / iOS 3.1？ （前綴）
• Android 2.1（前綴）

據我所知，通過box-lines: multiple包裝box-lines: multiple不會在任何瀏覽器中實現。

display: flexbox

• Chrome 17- ?? （前綴）
• Internet Explorer 10（帶前綴）

display：flex - 當前標准

• Chrome 21（前綴），29（未加前綴）
• Opera 12.1（無前綴），15（webkit前綴）
• Firefox 22（沒有前綴）
• Safari / iOS 7（前綴）
• 黑莓10（前綴）
• Internet Explorer 11（未加前綴）

http://caniuse.com/#feat=flexbox （請注意，IE10是唯一標記為支持包裝的部分支持的瀏覽器）

flexbox和flex的規格足夠相似，沒有理由不包括兩者，特別是因為IE10只支持flexbox規范。 box的規格是非常不同的，可能不值得包括，取決於你所經歷的效果，即使幾乎所有的屬性都與flexbox / flex規范中的flexbox 。

您可能會發現有些瀏覽器支持多個規范。 可能會有一段時間他們會放棄對舊規范的支持，因此請務必確保包含flex屬性。

Answer 2

據我所知，上述三種不同版本的柔性箱型號可按年齡分類。

1. display: box - 這是第一個被認為是2009年最新型號的靈活盒型號。請勿使用它。

2. display: flexbox - 這個靈活的盒子模型出現在2011年，仍在開發中。 不要使用它。

3. display: flex - 這是最新的靈活盒子模型，目前可以作為最新的盒子標准。 這可能會進一步發生一些變化，但這比其他兩個標准更受歡迎。