Flex显示 - Android上没有包装？

Question

我在容器中显示多个DIV，我希望它们在右侧没有更多空间时换行。它在IOS上运行良好，但我无法在Android上运行...

-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

这是一个jsfiddle：http://jsfiddle.net/M7yLn/457/

感谢您的帮助！ 巴斯蒂安

Answer 1

小提琴的问题似乎是孩子们实际上并没有屈服。我最近一直在大力尝试使用flexbox，并得出结论认为Safari 7（台式机或移动设备）不支持flex-wrap，尽管Modernizr表示它确实支持。我不知道你是否已在Android的内置浏览器或Android上的Chrome上进行过测试，但Android内置浏览器不支持它（如移动版Safari不支持）。

然而，你的小提琴中的孩子实际上并没有使用flexbox布局，因为你没有在它们上设置flex CSS属性。使弹性元素换行的另一个关键是指定flex-basis或min-width，因为width会被flex覆盖。这两个属性的行为相似，但min-width通常更具可预测性，而flex-basis将为您提供大约您指定的基本大小。

我forked your Fiddle显示根据flex-wrap包装的元素（在支持的浏览器中）。我在移动Safari中进行了测试，布局确实破坏了。