html - Flexbox - 旧设备上的 flex-wrap

Question

我使用 flexbox 创建了一个 2 列布局，顶部有一个 div 横跨两列(我将其用于菜单布局)。下面的 fiddle 展示了我是如何做到这一点的。不幸的是，虽然它在 Chrome/iOS 7 中完美运行，但它似乎不适用于旧版本的 Safari。 http://jsfiddle.net/Jtts9/

我不需要支持IE，但需要支持Android/iOS。这在 Chrome 和 iOS7 中正确显示，但是当我使用旧语法(例如 display: -webkit-box;)时，我无法复制这两列，如 flex-flow: row wrap 似乎不存在于旧语法中。我已经看到一些对 box-lines 的引用，但听起来这不受支持。

如何在使用旧的 2009 flexbox 语法的同时实现相同的外观？

Answer 1

最后我放弃了旧的 flexbox 语法，转而使用 float 和伪选择器。

与原始问题相比，此 fiddle 显示了解决方案。

http://jsfiddle.net/HQPKM/7/

我所做的是将 float: left 应用于所有元素，然后使用以下内容:

.item2 :nth-child(2){
    float: right;
}

将每隔一个元素向右浮动。

此外，为了在出现奇数项时复制 flexbox 的行为，我添加了以下规则:

.item2:last-child:not(:nth-child(odd)){
    width: calc(100% - 2px);
}

如果有奇数个框，这会使最终框跨越整个宽度。