我喜欢使用 flexbox,但出于某种原因,我无法在任何 iOS 设备上进行包装。包装是否有简单的回退?这是元素无法包装的问题:( JSFiddle Fans )
#flex {display: flex; flex-flow: row wrap;}
#flex .item {width:33.33%; min-width: 500px; min-height: 300px;}
#flex .one {background: blue;}
#flex .two {background: green;}
#flex .three {background: red;}
<div id="flex">
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
</div>
这是最简单的方法。然后,我尝试为所有内容添加 ton 前缀,看看是否有帮助,但没有:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
如果我想让东西在 iPhone 上正确包装,不使用 flexbox 的唯一解决方案是什么?
最佳答案
问题的核心在 iPhone 5 和 6 中通过所有浏览器一直存在。最后,它与设置百分比宽度有关。一旦我删除了所有应该堆叠的东西。我要感谢/u/andrei-gheorghiu因为他的 JSFiddles(在已删除的答案中)为我指明了正确的方向。
#flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#flex .item {min-width: 200px; min-height: 300px;}
#flex .one {background: blue;}
#flex .two {background: green;}
#flex .three {background: red;}
<div id="flex">
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
</div>
关于ios - iPhone 6 Flexbox 包装问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35489725/