Flexbox 包装 Safari 中第一行的最后一列

Question

在 Safari 和其他一些基于 iOS 的浏览器中查看时，第一行的最后一列被换行到下一行。

Safari：

Chrome/其他：

代码：

.flexthis {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexthis .col-md-4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<div class="row flexthis">
  <div class="col-md-4 col-sm-6 text-center">
    <div class="product">
      <img src="img.jpg" alt="" class="img-responsive">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>

Answer 1

说明

这是因为 Safari 将 :before 和 :after 伪元素视为真实元素。例如。想想一个有 7 件物品的容器。如果容器有 :before 和 :after Safari 将像这样定位项目：

[:before ] [1st-item] [2nd-item]

[3rd-item] [4th-item] [5th-item]

[6th-item] [7th-item] [:after  ]

解决方案

作为已接受答案的替代方案，我从 flex 容器中删除 :before 和 :after ，而不是更改 HTML。在你的情况下：

.flexthis.container:before,
.flexthis.container:after,
.flexthis.row:before,
.flexthis.row:after {
   content: normal; // IE doesn't support `initial`
}

Answer 2

只是为了更新我的问题

这是我采用的解决方案，这显然是为 Bootstrap4 修复的，它与 flexbox 兼容。所以这仅适用于 bootstrap3。

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

Answer 3

我知道这个问题已经很老了，但是我今天遇到了这个问题，并且浪费了 12 多个小时来修复它。尽管其中花了大约 10 个小时才意识到 12 列引导网格的 safari 失败了，但这不是其他问题。

我所做的修复相当简单。这是 Visual Composer 的版本。其他框架的类名称可能会有所不同。

.vc_row-flex:before, .vc_row-flex:after{
  width: 0;
}

Answer 4

我不想添加更多类来修复这种错误， 因此，您也可以自行修复 .row 类。

.row {
    &:before {
        content: none;
    }

    &:after {
        content: '';
    }
} 

Answer 5

在尝试使用 Bootstrap 为 TwentyThree CMS 做一个简单的网格时发现了这个问题，并且在 Safari 中遇到了同样的错误。无论如何，这为我解决了它：

.flex-container:before {
  display: inline;
}

Answer 6

我可以通过添加来修复它

.row:before, .row:after {
display: flex !important;
}

显然这不是最优雅的解决方案，但它可能同时适用于某些人，直到他们修复它为止。

Answer 7

Bootstrap 4 有问题 display: block;从 .row 类上的 css 或 javascript 设置时的属性。我想出了一个解决方案 只需创建一个类：

.display-block {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}

然后在你想显示行的时候应用这个类。

Answer 8

我在这个问题上也花了几个小时。就我而言，我在现有项目中插入了 flexbox，以使 row 中的所有元素具有相同的高度。除了 Safari 之外的所有浏览器都正确呈现它，但以上答案似乎都没有解决我的问题。

直到我发现还有 Bootstrap clearfix hack 被使用： （代码来自 laravel 项目，否则为通用 Bootstrap）

@foreach ($articles as $key => $article)
    @if ($key % 3 === 0)
        <div class="clearfix hidden-xs hidden-sm"></div>
    @endif
    @if ($key % 2 === 0)
        <div class="clearfix hidden-lg hidden-md"></div>
    @endif

    etc...
@endforeach

显然，在使用 flexbox 时，除 Safari 之外的其他浏览器会以某种方式忽略 .clearfix。

所以，当在你的列上使用 flexbox 时，就不需要再使用 Bootstrap 的 clearfix 了。

Answer 9

这似乎是 Safari 渲染中的一个错误，导致列溢出（并因此包装）Bootstrap 容器（可能是某种 Webkit 舍入错误？）。由于您使用的是 Bootstrap，因此您应该能够在不使用 flex 的情况下达到预期的效果：

<div class="row">
    <div class="col-md-4 col-sm-6 text-center">
        <div class="product">
            <img src="img.jpg" alt="" class="img-responsive">
            <h3>Name</h3>
            <p>Description</p>
        </div>
    </div>
</div>
<style>
    .product {
        /* this is to automatically center and prevent overflow
           on very narrow viewports */
        display: inline-block;
        max-width: 100%;
    }
</style>

但是！现在看你的例子的问题是你需要保持你的产品块的大小完全相同，否则网格不会保持它的形状。一种可能的解决方案是给 .product 一个固定的高度并使用媒体查询进行调整。

这是我制作的一个适用于 Safari 和其他浏览器的示例： http://codepen.io/anon/pen/PZbNMX 此外，您可以使用样式规则将图像或描述文本保持在一定的大小内，以便于维护。

另一种可能的解决方案是使用脚本或 jQuery 插件来实现更动态的统一大小，但我对这些东西不太了解。

我在尝试使用 Safari 结合 flex 和 Bootstrap 时遇到了同样的问题，所以我希望这会有所帮助。

Answer 10

我遇到了同样的问题，答案是 safari 上的 Flex 框似乎不喜欢在 display: flex 的同一个 div 上清除浮动。

Answer 11

.row:before, .row:after {
content:'';
display:block;
width:100%;
height:0;
}
.row:after {
clear:both;
}

Answer 12

如果您将 display flex 与 flex-wrap 一起使用，我解决了它对行的前后伪元素应用高顺序，因此它们定位为最后一个元素。

.row.flex_class {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.row.flex_class::before, .row.flex_class::after {
    order: 10;
}