我喜欢使用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>


那是最简单的方法。然后,我尝试为所有内容添加大量前缀,以查看是否有帮助,但没有成功:
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和iPhone 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/

10-12 00:18
查看更多