css - 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

你的 fiddle 的问题似乎是 children 实际上并没有被 flex 。我最近对 ​​flexbox 进行了大量试验，并得出结论，flex-wrap 在 Safari 7(桌面或移动设备)中不受支持，尽管 Modernizr 表示它支持。我不知道您是否在 Android 内置浏览器或 Android 上的 Chrome 中进行过测试，但 Android 内置浏览器不支持它的可能性不大(就像移动版 Safari 不支持)。

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

我forked your Fiddle显示根据 flex-wrap 换行的元素(在支持的浏览器中)。我在移动版 Safari 中进行了测试，布局确实崩溃了。