Flexbox包装-第一个和最后一个项目在iPad上显示错误

Question

我在iPad上使用flexbox包装时遇到问题。当在Chrome开发工具中模拟iPad时，我得到了我想要的结果，所有项目都正确包装和显示。然而，当我在物理iPad上使用Browserstack进行测试时，flex容器中的第一个和最后一个项目的行为不一样，请参阅下面的图像进行比较。

开发工具iPad仿真

浏览器堆栈iPad/物理设备

我一直在这里浏览其他人的解决方案，但没有用。以下是SASS片段，其中包含了人们对其他问题提供的解决方案，这些问题已经添加，但仍然不起作用。还添加了一个链接到下面有问题的页面，这样可以更容易地检查它。

这是我的Css

.blogPageCards {
display: flex;
flex-wrap: wrap;
flex-direction: row;
.articleCard {
flex-direction: column;
width: calc(50% - 30px);
margin: 0px 15px;
&:before {
display: none;
content: normal;
}
&:after {
display: none;
content: normal;
}
}
}

http://nevillejohnson.dev.clicky.co.uk/inspiration/

如果你需要更多信息，请告诉我。提前谢谢。

Answer 1

由于我不能写评论，所以我在这里写。我认为它不起作用，因为你的浏览器(我认为它是IOSSafari(需要css供应商前缀来实现flexbox。

我不确定你的Ipad使用的是哪一个IOS Safari版本，但如果它在3.2-6.1之间，你肯定必须把-webkit放在像这样的flexbox之前

.blogPageCards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
.articleCard {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: calc(50% - 30px);
margin: 0px 15px;
&:before {
display: none;
content: normal;
}
&:after {
display: none;
content: normal;
}
}
}