Flexbox Safari错误（flex-wrap） [英] Flexbox Safari bug (flex-wrap)

问题描述

我不知道为什么，但Safari总是错放元素。

I don't know why but Safari always misplaces the elements.

Safari：

Chrome（& others）：

Chrome (&others):

代码：

 <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>
<style>
  .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;
  }
</style>

推荐答案

我已经从代码中删除了类 row ，它工作正常。

I have the same problem with safari only. I have removed the class row from the code and it works fine.

<div class="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>
<style>
  .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;
  }
</style>

为什么删除 row ？
回答很简单在引导行有一些其他属性像：after，：before内容。因此，删除行会减少此开销，并允许flex正常工作。

Why remove row ? Answer is simple in bootstrap row has some other attributes with it like :after, :before content. So removing row reduces this overhead and allow flex to work properly.

这篇关于Flexbox Safari错误（flex-wrap）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！