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

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

苹果浏览器：

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>

说明

发生这种情况是因为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`
}

只是为了更新我的问题

这是我要使用的解决方案，这显然是与Flexbox兼容的Bootstrap4修复的。因此，这仅适用于bootstrap3。

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

我知道这个问题已经很久了，但是今天我遇到了这个问题，浪费了12个小时来解决它。尽管其中约有10个小时花在了实现Safari在12栏自举网格上失败的花费，但这没有其他问题。

我所做的修复非常简单。这是Visual Composer的版本。类名称对于其他框架可能有所不同。

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

我不想添加更多的类来修复此类错误，因此，您也可以修复.row类本身。

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

    &:after {
        content: '';
    }
} 

发现此问题试图为TwentyThree CMS使用Bootstrap进行简单的网格化，并在Safari中遇到相同的错误。无论如何，这为我解决了问题：

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

我能够通过添加来修复它

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

显然，这不是最优雅的解决方案，但在某些情况下，直到他们解决该问题，它才可能适用。

Bootstrap 4的display：block; 从CSS或.row类上的javascript设置属性。我想出了一个解决方案，只需将一个类创建为：

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

然后在要显示行时应用此类。

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

直到我发现仍然有一个 Bootstrap clearfix黑客在使用：（代码来自拉拉韦尔 项目，但否则使用通用的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

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

因此，在列上使用flexbox时，不再需要使用Bootstrap的clearfix。

这似乎是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结合使用时遇到了相同的问题，因此希望对您有所帮助。

我遇到了同样的问题，答案是野生动物园中的Flex框似乎不喜欢在显示的同一div上清除浮点数：flex。

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

如果您将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;
}