iPhone 6 Flexbox Wrapping问题

时间:2016-02-18 18:37:02

标签: ios css iphone css3 flexbox

我喜欢使用flexbox,但出于某种原因,我无法在任何iOS设备上进行包装。包装容易后退吗?这是一个问题,其中的项目不会换行:(JSFiddle Fans

def process_block(b):
    b1 = [line for line in b if not line.startswith('100   V')]
    b2 = [line for line in b1 if not line.startswith('300   V')]
    b3 = [line for line in b2 if not line.startswith('400   V')]
    b4 = [line for line in b3 if not line.startswith('AR00000')]
    b5 = [line for line in b4 if not line.startswith('734 - C')]
    b6 = [line for line in b5 if not line.lstrip().startswith('TXN DAT')]
    b7 = [line for line in b6 if not line.startswith('   ACCO')]
    b8 = [line for line in b7 if not line.rstrip() == '']
    return b8
#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;}

这是最简单的方法。然后我尝试在所有内容中添加一个 ton 的前缀,看看是否有帮助但是没有:

<div id="flex">
    <div class="item one"></div>
    <div class="item two"></div>
    <div class="item three"></div>
</div>

如果我想在iphone上正确包装,的唯一解决方案是否使用flexbox?

4 个答案:

答案 0 :(得分:9)

该问题的核心在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>

答案 1 :(得分:1)

iPhone 6s不支持flex-direction标记。 我用flex-wrap替换它来解决问题。

旧:flex-direction: column-reverse

新:flex-wrap: wrap-reverse

这是工作!)

答案 2 :(得分:0)

仅使用 显示:-webkit-box;

为我解决了问题 在 iPhone 6 Plus 上

答案 3 :(得分:-3)

我通过提供弹性项display: inline-block;

解决了这个问题