css - Flex 显示器 - Android 上没有换行?

标签 css

我在一个容器中显示多个 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-basismin-width,因为 width 覆盖 flex 。这两个属性的行为相似,但 min-width 通常更可预测,而 flex-basis 将为您提供大致为您指定的基本大小。

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

关于css - Flex 显示器 - Android 上没有换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24003685/

相关文章:

javascript - HTML/CSS - 修复了带有可滚动内容的页面边框

javascript - jQuery 背景颜色随淡入淡出而变化

css - z-index 只适用于以前的 child ?

css - 我希望我的文本流到下一行,但 Flex 不允许我这样做?

jquery - 两个日期选择器未显示在单个 html 页面中

html - 调整大小时不缩小的表格

html - 如何只为列中的div设置背景颜色

css - Bootstrap - 容器在小型设备中重叠

html - 整个框作为链接

html - CSS 在最小化屏幕时保持 div 的固定宽度