css – 适用于Firefox的Flex-wrap polyfill

前端之家收集整理的这篇文章主要介绍了css – 适用于Firefox的Flex-wrap polyfill前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
根据 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代替.

猜你在找的CSS相关文章