iPhone 6柔性盒包装问题

Question

我喜欢使用柔性盒，但由于某些原因，我无法在任何iOS设备上使用包装。包装容易吗？这里有一个项目不能包装的问题：( JSFiddle风扇 )

​

#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;

如果我想让东西正确地包装在iphones上，而不是的唯一解决方案是使用柔性盒吗？

Answer 1

问题的核心是通过所有浏览器在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>

​

Answer 2

iPhone 6不支持flex-direction标记。我用flex-wrap代替它解决了这个问题。

老：flex-direction: column-reverse

新：flex-wrap: wrap-reverse

这是工作！)

Answer 3

仅使用显示器：-webkit-box;

修正了iPhone 6+上的问题