CSS 柔性盒模型 - 显示：flex、box、flexbox？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15662578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexible box model - display : flex, box, flexbox?
提问by Kevin
Many of us are aware today that the older values of the displayproperty like inlineand blockare outdated after the new flexible box model has been introduced in CSS3. But, we might find different information on the web in the same flexible box model.
我们中的许多今天的较旧的值都知道display像房地产inline和block新的灵活盒模型后已经过时了CSS3中被引入。但是，我们可能会在同一个弹性盒模型中在网络上找到不同的信息。
We might find mainly 3 different values of the displayproperty namely flex, boxand flexbox. What is the difference between these three flexible box models and which one to use?
我们可能会发现该display属性主要有 3 个不同的值，即flex,box和flexbox。这三种灵活的盒子模型和使用哪一种有什么区别？
回答by cimmanon
You use whichever ones you need for the browsers you need to support.
您可以使用您需要支持的浏览器所需的任何一种。
display: box
display: box
- Firefox 2.0? (prefixed)
- Chrome 4.0? (prefixed)
- Safari/iOS 3.1? (prefixed)
- Android 2.1 (prefixed)
- 火狐2.0？（前缀）
- 铬 4.0？（前缀）
- Safari/iOS 3.1？（前缀）
- Android 2.1（带前缀）
As far as I can tell, wrapping via box-lines: multipleis not implemented in any browser.
据我所知，box-lines: multiple任何浏览器都没有实现包装 via 。
display: flexbox
display: flexbox
- Chrome 17-?? (prefixed)
- Internet Explorer 10 (prefixed)
- 铬 17-?? （前缀）
- Internet Explorer 10（带前缀）
display: flex- the current standard
display: flex- 当前标准
- Chrome 21 (prefixed), 29 (unprefixed)
- Opera 12.1 (unprefixed), 15 (webkit prefix)
- Firefox 22 (unprefixed)
- Safari/iOS 7 (prefixed)
- Blackberry 10 (prefixed)
- Internet Explorer 11 (unprefixed)
- Chrome 21（带前缀）、29（不带前缀）
- Opera 12.1（无前缀）、15（webkit 前缀）
- Firefox 22（无前缀）
- Safari/iOS 7（前缀）
- 黑莓 10（带前缀）
- Internet Explorer 11（无前缀）
http://caniuse.com/#feat=flexbox(Note that IE10 is the only browser marked as having partial support that supports wrapping)
http://caniuse.com/#feat=flexbox（请注意，IE10 是唯一标记为具有支持换行的部分支持的浏览器）
The specs for flexboxand flexare similar enough there's no reason notto include both, especially since IE10 only supports the flexboxspec. The spec for boxis very different and might not be worth including depending on the effect you're after, even though nearly all properties have an analog to the ones found in the flexbox/flexspecs.
为规范flexbox和flex足够相似，我们没有理由不以包括，特别是因为IE10仅支持flexbox规范。的规范box非常不同，根据您所追求的效果可能不值得包括在内，即使几乎所有属性都与flexbox/flex规范中的属性类似。
You may find that there are some browsers that support multiple specs. There will likely come a time where they will drop support for the older spec, so always make sure you include the flexproperties.
您可能会发现有些浏览器支持多种规格。他们很可能会放弃对旧规范的支持，因此请务必确保包含这些flex属性。
回答by Kevin
As far as I know, the above three different versions of the flexible box model can be classified by their ages.
据我所知，以上三个不同版本的弹性盒模型可以按年龄来分类。
display: box- This was the first flexible box model that was accepted as the newest model around the year 2009. Don't use it.display: flexbox- This flexible box model came in the year 2011 which was still in its development. Don't use it.display: flex- This is the newest flexible box model that currently finds its place as the latest box standard. This might further undergo some changes but this is preferred to the other two standards.
display: box- 这是第一个在 2009 年左右被接受为最新模型的柔性盒模型。不要使用它。display: flexbox- 这种灵活的盒子模型于 2011 年问世，仍在开发中。不要使用它。display: flex- 这是最新的灵活盒模型，目前已成为最新的盒标准。这可能会进一步发生一些变化，但这比其他两个标准更受欢迎。
