css – Flexbox Safari bug(flex-wrap)

前端之家收集整理的这篇文章主要介绍了css – Flexbox Safari bug(flex-wrap)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我不知道为什么,但Safari总是错位元素。

苹果浏览器:

Chrome(& others):

码:

  1. <div class="row flexthis">
  2. <div class="col-md-4 col-sm-6 text-center">
  3. <div class="product">
  4. <img src="img.jpg" alt="" class="img-responsive">
  5. <h3>Name</h3>
  6. <p>Description</p>
  7. </div>
  8. </div>
  9. </div>
  10. <style>
  11. .flexthis{
  12. display: -webkit-Box;
  13. display: -webkit-flex;
  14. display: -ms-flexBox;
  15. display: flex;
  16. -webkit-flex-wrap: wrap;
  17. -ms-flex-wrap: wrap;
  18. flex-wrap: wrap;
  19. }
  20.  
  21. .flexthis .col-md-4{
  22. display: -webkit-Box;
  23. display: -webkit-flex;
  24. display: -ms-flexBox;
  25. display: flex;
  26. }
  27. </style>

解决方法

我只有与野生动物园有同样的问题。我从代码删除了类行,它可以正常工作。
  1. <div class="flexthis">
  2. <div class="col-md-4 col-sm-6 text-center">
  3. <div class="product">
  4. <img src="img.jpg" alt="" class="img-responsive">
  5. <h3>Name</h3>
  6. <p>Description</p>
  7. </div>
  8. </div>
  9. </div>
  10. <style>
  11. .flexthis{
  12. display: -webkit-Box;
  13. display: -webkit-flex;
  14. display: -ms-flexBox;
  15. display: flex;
  16. -webkit-flex-wrap: wrap;
  17. -ms-flex-wrap: wrap;
  18. flex-wrap: wrap;
  19. }
  20.  
  21. .flexthis .col-md-4{
  22. display: -webkit-Box;
  23. display: -webkit-flex;
  24. display: -ms-flexBox;
  25. display: flex;
  26. }
  27. </style>

为什么要删除行?答案很简单,引导行中还有一些其他属性,如:after,before,content。所以删除行减少了这个开销,并允许flex正常工作。

猜你在找的CSS相关文章