Flexbox兼容性(重点是kindle fire)

Question

所以我有一个关于Kindle设备上的柔性盒支持的问题，如果你还有关于总体支持的信息的话。看来display:flex和flex-wrap:wrap/nowrap的属性是不受支持的，至少在早期的kindle fire设备上是这样的(我在较新的设备上读过，但是没有测试的方法)。看起来好像是flex:box (但是支持旧版本的flexbox )。

我已经开始使用不同的显示属性，然后使用@support (display:flex)或(flex-wrap:wrap)以逐步增强的方式针对支持柔性盒的设备(如果它们支持柔性盒，它们支持媒体查询)，所以火狐在包装上没有问题(也使用url-前缀-moz-)，kindle fire总体上没有问题，但我想知道是否还有其他解决方案？我的意思是这个方法几乎是布局代码的两倍。

www.caniuse.com只指出opera-mini 5-7和IE8-9缺乏支持，并且存在已知的问题：(还显示了我用AutoPrefixer解决的供应商前缀)

Firefox不支持以百分比指定宽度。 截至2013年9月，根据规范草案，IE10和IE11的flex默认值是0 0 auto而不是0 1 auto。 Firefox不支持弹性包装、对齐内容属性。 在IE10和IE11中，如果容器具有min-height但没有显式的height属性，则具有display: flex和flex-direction: column的容器将无法正确计算其柔性子容器的大小。

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

但是我一直找不到与kindle设备有关的任何东西。

Answer 1

遗憾的是，它会加倍，可能更多的是布局代码，这就是为什么您不应该使用imho，例如，flex-wrap，因为它只在chrome21+上可用，因为它将带您创建一个完全不同的布局

只支持~标准语法、MSIE10语法(非常类似)和-webkit-遗留语法(用于Android2.x支持)

• @supports还没有被广泛使用
• 对于特性检测，我建议现代化；另外，在github上有各种插件，用于针对特定的flexbox属性/值进行测试，或者您可以自己编写它们。
• 然而kindle fire是Android2.3，那么它更有可能使用Webkit 533，因此它支持传统的flexbox -webkit-语法
• flex:box从来不存在，但是(moz|webkit)box-flex:1和display:(moz|webkit)box
• 默认值不是问题，只需做*{...}来规范它们
• flex-wrap:wrap不受广泛支持(火狐29，铬21，msie11)，所以你不应该使用它.如果您想要类似的东西，您可以使用多列布局模块用于垂直流，或内联块用于水平流。遗憾的是，现在这是最好的选择
• 百分比工作在火狐(http://jsfiddle.net/RBaR2/).缺少的百分比支持bug指的是旧的-moz-box语法，您不应该使用这个语法(真的很旧)

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

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