Question

我们在iPad和Mac上遇到了一个问题，我们真的很讨厌。

我们正在使用bootstrap，并使用.col-xs-12.col-sm-5.col-md-3类在.row中创建了9个元素。

在.row上我们使用以下css应用了.flex-start类：

.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元素存在问题。

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

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

您可能还会看一下这篇文章：

Flexbox Safari bug (flex-wrap)

Answer 2

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

这在Safari中可以正常使用。

元素为25％时Safari显示弹性不起作用

2 个答案: