Question

我已经构建了一个依赖Flexbox的布局。在较小的屏幕上，方向从＆＃34;正常＆＃34;切换。到列以及订购方面的一些变化。

这在Chrome，FF中有效。在Safari @include flex-direction(column)上创建了一个大混乱，整个布局被抛弃了，因此我创建了一个这样的mixin：

@mixin flex-columns() {
  @include flex-direction(column);
  display: -webkit-box;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
}

这解决了IOS的问题并且看起来应该是这样，除了@inlcude order(<n>);不再起作用，无论是在Chrome上还是在IOS上，Firefox都能正常工作。

这里简单起见是一个缩短版的代码：

<!-- html -->
<div class="container">
    <div class="child child-1">...</div>
    <div class="child child-2">...</div>
    <div class="child child-3">...</div>
</div>

//Sass (compass)
div.container {
    @include display-flex();

    div.child-1 {
        @inlcude flex(0 1 10%);
    }
    .
    .
    .
}

@media ... {
    div.container {
        @include flex-columns();

        div.child-1 { @include order(2) }
        div.child-2 { @include order(3) }
        div.child-3 { @include order(1) }

    }
}

任何想法？如果如果方向设置为列，Safari不支持排序，我怎么能从safari修复中排除chrome（display: -webkit-box;）??

感谢您的帮助！

Flexbox - 列和订购IOS

0 个答案: