根据
Mozilla’s own documentation:
Firefox supports only single-line flexBox.
但是我想开始使用flexBoxes,因为它现在是mostly supported by all modern browsers(幸运的是我不需要为这个项目定位IE 9).
由于Firefox仅支持单行flexBox,因此我使用它的唯一好处是对齐内容和可能的对齐项.在我看来,flexBoxes的真正强大之处在于flex-flow和flex-wrap,它允许响应式布局.
实际上,我尝试从Mozilla文档中复制Holy Grail Layout example并在Firefox中打开它,它甚至在那里都没有正常工作.订单已更改但仍显示一行中的三个元素,而不是更改弹性流.
相关问题:Flexbox not wrapping flex items
我非常确定我的大多数目标受众都在Internet Explorer,Firefox和Safari for iOS上.是否有一个我可以用于Firefox的polyfill来获得所需的行为,或者我是否必须使用Modernizr回退到浮点数,宽度和clearfixs(如果是这样,我甚至在Modernizr中寻找什么?)
解决方法
不再需要polyfill:flex-wrap:用于Firefox 28的包装以及修复,请参阅我的答案
here.
修复旧浏览器:对于“solved by flexbox”演示,Philip Walton使用简单的CSS polyfill:@supports not(flex-wrap:wrap)仅针对不支持flex-wrap的浏览器:wrap,据我所知:display:使用inline-block代替.