Css Flexbox包装-第一个和最后一个项目在iPad上显示不正确

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

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

这是我的Css

.blogPageCards{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
.商品卡{
弯曲方向：立柱；
宽度：计算（50%-30px）；
利润率：0px 15px；
&：之前{
显示：无；
内容：正常；
}
&：之后{
显示：无；
内容：正常；
}
}
}

因为我无法写评论，所以我在这里写评论。 我认为它不起作用，因为您的浏览器（我假设它是IOS Safari）需要css供应商前缀来实现flexbox

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

.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;
        }
    }
}

---

我建议你试着在固定大小（保证金和30像素的计算器）附近玩嗨，不太清楚你的意思？我有一个固定的大小每件物品在50%-30像素谢谢麦金也是固定的。我的意思是，一个固定的尺寸可能是导致奇怪行为的原因。在某些设备中，15像素（或30像素或其他）可能看起来很好，而在其他设备中则完全如此。