CSS Flexbox 在 Safari 中包装第一行的最后一列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34250282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox wraps last column of the first row in Safari
提问by DominikN.
The last column of the first row is wrapped to the next line when viewing in Safari, and some other iOS based browsers.
在 Safari 和其他一些基于 iOS 的浏览器中查看时，第一行的最后一列会换行到下一行。
Safari:
苹果浏览器：
Chrome / Others:
铬/其他：
Code:
代码：
.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>采纳答案by DominikN.
Just to update on my question
只是为了更新我的问题
This is the solution I go with, this is obviously fixed for Bootstrap4, which is flexbox compatible. So this is only for bootstrap3.
这是我采用的解决方案，这显然适用于与 flexbox 兼容的 Bootstrap4。所以这仅适用于 bootstrap3。
.row.flexthis:after, .row.flexthis:before{
display: none;
}
回答by Taylan
Explanation
解释
This happens because Safari treats :before and :after pseudo-elements as if they were real elements. E.g. think about a container with 7 items. If container has :before and :after Safari will position the items like this:
发生这种情况是因为 Safari 将 :before 和 :after 伪元素视为真正的元素。例如，考虑一个装有 7 个项目的容器。如果容器有 :before 和 :after Safari 将这样定位项目：
[:before ] [1st-item] [2nd-item]
[3rd-item] [4th-item] [5th-item]
[6th-item] [7th-item] [:after ]
Solution
解决方案
As an alternative to the accepted answer I remove :before & :after from flex containers instead of altering the HTML. In your case:
作为已接受答案的替代方案，我从 flex 容器中删除 :before & :after 而不是更改 HTML。在你的情况下：
.flexthis.container:before,
.flexthis.container:after,
.flexthis.row:before,
.flexthis.row:after {
content: normal; // IE doesn't support `initial`
}
回答by Gaurav
I know the issue is quite old, but I ran into this issue today, and wasted over 12 hours in fixing it. Though about 10 hours out of that were spent in realizing that safari is failing with 12-column bootstrap grid, and it is no other issue.
我知道这个问题很老，但我今天遇到了这个问题，浪费了 12 多个小时来修复它。尽管其中大约 10 个小时用于意识到 safari 使用 12 列引导网格失败，但没有其他问题。
Fix that I made is rather simple. Here is the version for Visual Composer. Class names may vary for other frameworks.
我做的修复相当简单。这是 Visual Composer 的版本。其他框架的类名可能会有所不同。
.vc_row-flex:before, .vc_row-flex:after{
width: 0;
}
回答by Joeri Wauters
I didn't want to add more classes to fix this kind of bug, so alternatively you can fix the .row class itself.
我不想添加更多类来修复此类错误，因此您也可以修复 .row 类本身。
.row {
&:before {
content: none;
}
&:after {
content: '';
}
}
回答by Joeri Wauters
Found this issue trying to do a simple grid using Bootstrap for the TwentyThreeCMS, and got the same bug in Safari. Anyway, this solved it for me:
尝试使用 Bootstrap 为TwentyThreeCMS做一个简单的网格时发现了这个问题，并且在Safari 中遇到了同样的错误。无论如何，这为我解决了这个问题：
.flex-container:before {
display: inline;
}
回答by Farhan
Bootstrap 4 have issues with display: block; property when set either from css or from javascript on the .row class. I figured a solution for this Just create a class as:
Bootstrap 4 有显示问题：块；从 .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;
}And then apply this class when you want to display the row.
然后当你想显示行时应用这个类。
回答by ashamun
I was able to fix it by adding
我能够通过添加来修复它
.row:before, .row:after {
display: flex !important;
}
Obviously this isn't the most elegant solution but it may work for some in the meantime until they fix it.
显然，这不是最优雅的解决方案，但在此期间它可能对某些人有效，直到他们修复它。
回答by McVenco
I've spent a few hours on this issue as well. In my case I inserted flexbox in an existing project to make all elements in a rowhave the same height. All browsers except Safari rendered it correctly, but none of the above answers seemed to fix my problem.
我也在这个问题上花了几个小时。就我而言，我在现有项目中插入了 flexbox 以使 arow中的所有元素具有相同的高度。除 Safari 外的所有浏览器都正确呈现，但上述答案似乎都不能解决我的问题。
Until I discovered that there still was a Bootstrapclearfixhack being used:
(code is from a laravelproject, but generic Bootstrap otherwise)
直到我发现仍然有人Bootstrapclearfix在使用 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
Apparently, other browsers than Safari ignore the .clearfixin some way when flexbox is being used.
显然，.clearfix当使用 flexbox 时，除 Safari 之外的其他浏览器会以某种方式忽略。
So, when using flexbox on your columns, there is no need to use Bootstrap's clearfix anymore.
因此，在您的列上使用 flexbox 时，不再需要使用 Bootstrap 的 clearfix。
回答by Jose S
In case you are using display flex with flex-wrap i solved it applying a hight order to the before and after pseudo-elements of the row, so they position as the last elements.
如果您使用带有 flex-wrap 的 display flex 我解决了它对行的前后伪元素应用高度顺序的问题，因此它们定位为最后一个元素。
.row.flex_class {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.row.flex_class::before, .row.flex_class::after {
order: 10;
}
回答by Enot
.row:before, .row:after {
content:'';
display:block;
width:100%;
height:0;
}
.row:after {
clear:both;
}
