Flexbox 兼容性（强调 kindle fire）

Question

所以我有一个关于 Kindle 设备上的 flexbox 支持的问题，如果您有更多关于总体支持的信息。似乎不支持display:flex 和flex-wrap:wrap/nowrap 属性，至少在早期的kindle fire 设备上是这样（我读过它在较新的设备上，但无法测试）。看起来好像是flex:box（不过支持旧版本的 flexbox）。

我已经开始使用不同的显示属性，然后使用 @support (display:flex) 或 (flex-wrap:wrap) 以逐步增强的方式定位支持 flexbox 的设备（如果它们支持 flexbox，那么它们就支持媒体查询）所以 firefox 没有包装上的问题（也使用 -moz- 的 url 前缀），而 kindle fire 总体上没有问题，但我想知道是否还有其他解决方案？我的意思是这种方法几乎使布局代码翻了一番。

www.caniuse.com 仅表示opera-mini 5-7 和IE 8-9 缺乏支持，并且存在以下已知问题：（还显示我使用AutoPrefixer 解决的供应商前缀）

Firefox 不支持以百分比指定宽度。

flex 的 IE10 和 IE11 默认值为 0 0 auto 根据草案规范，截至 2013 年 9 月，而不是 0 1 auto。

Firefox 不支持 flex-wrap、align-content 属性。

在 IE10 和 IE11 中，带有 display: flex 和 flex-direction: column 的容器将无法正确计算其弯曲子项的大小，如果 容器有min-height 但没有明确的height 属性。

还有一篇关于跨浏览器支持的文章：http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

但我一直找不到任何与 Kindle 设备相关的信息。

Answer 1

可悲的是，它加倍并且可能更多的布局代码，这就是为什么恕我直言，你不应该使用，例如，flex-wrap，因为它只在 chrome21+ 上可用，因为它会带你创建一个完全不同的布局

仅支持 ~standard 语法、MSIE10 语法（非常相似）和 -webkit- legacy 语法（用于 android 2.x 支持）

• @supports 尚未广泛使用

• 对于特征检测，我建议使用modernizr；另外，在 github 上有各种插件可以针对特定的 flexbox 属性/值进行测试，或者您可以自己编写它们

• 虽然kindle fire是android 2.3，那么它很可能使用Webkit 533，因此它支持旧的flexbox -webkit-语法

• flex:box 从未存在，但 (moz|webkit)box-flex:1 和 display:(moz|webkit)box

• 默认值不是问题，只需执行*{...} 将它们标准化

• flex-wrap:wrap 没有得到广泛支持（firefox 29、chrome 21、msie11）所以你不应该使用它......如果你想要类似的东西，你可以使用多列布局模块进行垂直流或用于水平流的内联块。遗憾的是目前这是最好的选择

• percentages 适用于 firefox (http://jsfiddle.net/RBaR2/)...缺少的百分比支持错误指的是旧的 -moz-box 语法，你不应该使用它（真的很旧的 firefox）

http://dundalek.com/css3-flexbox-reference/

http://zomigi.com/blog/flexbox-syntax-for-ie-10/