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

Posted 2023-03-06

【中文标题】Flexbox 包装 Safari 中第一行的最后一列

【英文标题】：Flexbox wraps last column of the first row in Safari

【发布时间】：2016-03-18 22:40:46

【问题描述】：

在 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"  class="img-responsive">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>

【问题讨论】：

不光是 Safari，iOS 上几乎所有的浏览器都有这个 bug - safari、chrome、firefox、opera

它在所有iOS浏览器中中断的原因是iOS只允许其他浏览器使用Safari中的WebKit。因此，Safari 的任何渲染错误也会出现在其他 iOS 浏览器上。

【参考方案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`

【讨论】：

我可以确认重置 before 和 after 修复了 Safari 中的问题

我也可以确认。似乎是最好的答案。

这确实应该是答案。结构不变，只是一个css编辑来纠正OP的问题。

谢谢 - 这解决了 Safari 中 Foundation 的弹性网格问题

祝福你和你所有的孩子

【参考方案2】：

只是为了更新我的问题

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

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

【参考方案3】：

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

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

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

【参考方案4】：

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

.row 
    &:before 
        content: none;
    

    &:after 
        content: '';
    
 

【参考方案5】：

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

.flex-container:before 
  display: inline;

【参考方案6】：

我可以通过添加来修复它

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

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

【参考方案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;

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

【参考方案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 了。

【参考方案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"  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 时遇到了同样的问题，所以我希望这会有所帮助。

【参考方案10】：

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

【参考方案11】：

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

.row:after 
clear:both;

【讨论】：

请解释为什么会这样。什么部分是关键

【参考方案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;