支持CSS3 @supports
如果支持我的布局，我计划在自己的布局中实施Flexbox解决方案，如果支持CSS3的@support{...}查询，我将检测功能。
但是我应该测试什么？ 由于特性@support查询查找给定样式的支持，然后在支持时实现样式，我应该寻求哪些支持？
换句话说，所有Flexbox支持实现的风格是什么？
我会认为这将是display:box; 对于2009年的Flexbox实施， display:flexbox; 对于2011年的短暂实施，并display:flex; 对于规范的当前和最终实施？
实现display:box / display:flexbox和display:flex的浏览器不太可能支持@supports 。 而且，直到昨天，Firefox才支持flex-wrap 。 与此同时，Internet Explorer 11支持display:flex ，但不支持@supports 。
因此，如果您的用户可能在任何平台上使用Firefox / Chrome或在Windows 8上使用MSIE11，那么您最好使用Modernizr等JavaScript解决方案或假设浏览器支持display:flex 。如果您想支持iPhone，请记住-webkit-前缀和flex属性，并使用display:-webkit-flex 。
由于flexbox自动覆盖浮动，并且flex属性允许您覆盖宽度，因此您可以将CSS用于非display:flex浏览器和那些可以做到的CSS浏览器。
Flexbox（标准草案）支持+功能查询支持：
不支持任何旧版Flexbox草稿的浏览器都不支持功能查询。
在此时与Flexbox结合的功能查询的唯一实际用途是检测浏览器是否支持flex-wrap: wrap 。 但是，仍然在使用的浏览器的数量支持display: flex而不是flex-wrap: wrap几乎可以认为它们在统计学上并不重要。
.foo {
display: -ms-flexbox;
display: -webkit-flex;
}
@supports (flex-wrap: wrap) {
display: flex;
}
相关：柔性盒模型 - 显示器：柔性盒，柔性盒？
链接地址: http://www.djcxy.com/p/75615.html