css - 桌面和移动设备向后兼容的 Flexbox 实现 - 特别是 Safari

标签 css safari flexbox

我在让 Flexbox 实现在 Safari 移动版、桌面版和 Android 上运行时遇到了很大的问题。它几乎适用于 Chrome 和 IE11。如果它适用于 IE Mobile、早期版本的 IE 和 Firefox,那就太好了。这就是我所拥有的:

display:flex; 
display:-webkit-flex; 
display:-ms-flexbox;

flex-flow: row wrap; 
-webkit-flex-flow: row wrap; 
-ms-flex-flow: row wrap; 

justify-content:space-around; 
-webkit-justify-content:space-around; 
-ms-justify-content:space-around;  

align-items:center; 
-webkit-align-items:center; 
-ms-align-items:center; 

如何更改上述内容以使其大部分(向后)兼容最大的桌面和移动浏览器?有关此主题的信息很少。

此外,wrap 属性是否适用于 Safari?我对此有特别重大的问题。

最佳答案

这个:http://zomigi.com/blog/flexbox-presentation/ -- 请参阅此页面上的链接(使用旧语法和新语法的 CSS 技巧文章,尤其是 -- 以及此: http://the-echoplex.net/flexyboxes/

...展示如何以正确的顺序混合新旧语法和前缀(级联样式表的级联部分)此时将为 Flexbox 提供最佳的跨浏览器/版本支持。

希望这对 future 的元素有所帮助,直到 Flexbox 得到更清晰的实现......

-AK

关于css - 桌面和移动设备向后兼容的 Flexbox 实现 - 特别是 Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21079238/

相关文章:

html - 元素和侧面之间的中心 DIV?

html - 为什么我在按钮上得到矩形包裹图标?

css - 动态表单边框,CSS

html - 当 flex 元素变得太大时,iPad Safari 会忽略边距

javascript - 滚动到 flexbox 容器中的元素

html - 如何为笔记本电脑 1024px 和 ipad 1024px 宽度设置不同的媒体查询?

ios - 如何清除 iOS 应用程序中的 safari 缓存?

javascript - javascript 中的 location.href?

javascript - window.matchMedia 在 Safari 中不起作用

html - 如何使 flexbox 内部的输入大小达到可用空间?