Safari 上的 Flex-wrap 问题

【问题标题】：Flex-wrap issues on safariSafari 上的 Flex-wrap 问题
【发布时间】：2014-10-06 17:12:42
【问题描述】：

我试图让两个元素填充它们的容器并在它们达到某个最小尺寸时包装。我的代码在 safari 以外的所有浏览器上都能完美运行，我想不出替代方案。这似乎是 flex-basis: 0

的问题

问题来了：

http://www.cssdesk.com/RKeNY

两者在 safari 和 chrome 中的显示方式不同。当在 safari 上更改容器宽度时，flex-wrap 无效。

【问题讨论】：

经历相同 - 除了不使用 flex-basis 之外，我没有找到任何其他解决方案。

标签： cross-browser flexbox

【解决方案1】：

尝试设置

-webkit-flex:1 1 auto;

而不是

-webkit-flex:1;

在 flex 元素上。

这里讨论：https://github.com/Modernizr/Modernizr/issues/1414

具体来说：

hexalys 28 天前发表评论

要启用包装，您需要专门设置 flex: auto (相当于 flex: 1 1 auto;) 或者设置两个属性 flex-shrink: 1;和弹性基础：自动。弹性：1；你在你的代码中确实有弹性： 1 1 0像素；技术上允许缩小，但显然有一个错误在 Safari 中使用 webkit 前缀版本，它不允许 flex 包裹在那种情况下，而它在无前缀的情况下正确 Chrome 和 Firefox 的版本。

【讨论】：