我使用 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 语法的同时实现相同的外观?
最佳答案
最后我放弃了旧的 flexbox 语法,转而使用 float 和伪选择器。
与原始问题相比,此 fiddle 显示了解决方案。
我所做的是将 float: left
应用于所有元素,然后使用以下内容:
.item2 :nth-child(2){
float: right;
}
将每隔一个元素向右浮动。
此外,为了在出现奇数项时复制 flexbox 的行为,我添加了以下规则:
.item2:last-child:not(:nth-child(odd)){
width: calc(100% - 2px);
}
如果有奇数个框,这会使最终框跨越整个宽度。
关于html - Flexbox - 旧设备上的 flex-wrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20241886/