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

Posted 2023-03-07

【中文标题】当元素为 25% 时，Safari 显示 flex 不起作用

【英文标题】：Safari display flex not working when elements are 25%

【发布时间】：2016-06-06 14:42:28

【问题描述】：

我们在 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% 可以解决此问题，但我们不希望出现这种情况。

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

【参考方案1】：

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

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

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

你也可以看看这篇文章：

Flexbox Safari bug (flex-wrap)

【讨论】：

救命稻草！这节省了我几个小时的工作！请记住也为这个问题投票。

【参考方案2】：

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

这在 Safari 中可以正常工作。