当元素为 25% 时，Safari 显示 flex 不起作用

Question

我们在 iPad 和 Mac 上遇到了一个非常烦人的问题。

我们正在使用引导程序，并在 .row 中创建了 9 个元素，其中包含 .col-xs-12.col-sm-5.col-md-3 类。

在 .row 上，我们应用了一个 .flex-start 类，其 css 如下：

.flex-start {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

在 safari 中，第一行仅包含 3 个项目。

示例here 和屏幕截图here。您必须在 Mac 或 iPad 上的 safari 中打开

将 col-md-3 的宽度设置为 24.9% 可以解决此问题，但我们不希望出现这种情况。

有没有其他人遇到过这个问题，并且知道解决方法？

Answer 1

我最近遇到了同样的问题。行类附带的伪 :after 和 :before 元素存在问题。

我认为省略行类不是最好的解决方案。在我的情况下，我可以用这个 css 在 safari 中修复它：

.row:before,
.row:after {
    display: none;
}

你也可以看看这篇文章：

Flexbox Safari bug (flex-wrap)

Answer 2

只需将“clearfix”类添加到行并添加“float:left;”行内所有列的属性。

这在 Safari 中可以正常工作。