Question

我在使用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？我对那个问题特别重要。

Answer 1

这：http://zomigi.com/blog/flexbox-presentation/ - 请参阅此页面上的链接（使用旧语法和新语法的CSS-tricks文章，特别是 - 以及：http://the-echoplex.net/flexyboxes/

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

希望这有助于未来的项目，直到flexbox更明确地实施......

-ak

Answer 2

我找到了答案。我的秘诀是让每个系列中的非前缀弹性框属性不再是第一个。我不知道为什么会有效。

桌面和桌面移动向后兼容的flexbox实现 - 特别是Safari

2 个答案: