我在一个容器中显示多个 DIV,我希望它们在右侧没有更多空间时换行。它在 IOS 上运行良好,但我无法使其在 Android 上运行...
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
这是一个 jsfiddle:http://jsfiddle.net/M7yLn/457/
感谢您的帮助! 巴斯蒂安
最佳答案
你的 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 中进行了测试,布局确实崩溃了。
关于css - Flex 显示器 - Android 上没有换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24003685/