css flexbox wrap属性在ios6上不起作用

Question

我现在正在处理我的项目，因此我决定使用flexbox代替float。它适用于我，但我发现display:flex不适用于旧的iphone（ios 6.1）。所以我添加了

display: -webkit-box;

Flex属性现在可以使用，但所有项目都排成一行。我创建了一个简单的fiddle来显示问题。 我还制作了两个截图，以展示它在PC和iPhone上的工作原理。

PC：

iPhone：

如您所见-webkit-flex-wrap: wrap不起作用。

有谁知道如何解决这个问题？ 我希望得到你的帮助。

Answer 1

在iOS 7.0中支持iOS中的current flexbox specification。

iOS 3.2 - 6.1支持old flexbox specification和不支持包装。

请在此处查看浏览器支持数据：http://caniuse.com/#search=flexbox

Answer 2

有关如何对齐弹性项目（行或列）的信息，请参阅flex-direction属性。

.wrapper {
    flex-direction: column;
    ...
}

此外，在您的Flex项目上，您有（width: 500px;）尝试flex属性：

.wrapper > div {
   flex: 0 0 500px;
   ...
}