为什么在Safari和Chrome中使用Flexbox时会出现不同的行为？

Question

我正在展示一行图片。以下是我的html代码：

<div class="flex">
  <img src="img1.jpg"/>
  <img src="img2.jpg"/>
  <img src="img3.jpg"/>
  <img src="img4.jpg"/>
</div>

这是我的css：

.flex {
  display: flex
}

img {
  height: auto;
}

我希望我的图片能够在一排中显示。因为我没有给img标签设置宽度，在Chrome浏览器中，图片会按照它们的自然宽度显示并且会超出屏幕。这正是我想要的效果。但是在Safari浏览器中，flexbox只会占用整个viewport的宽度。我尝试了设置图片宽度、flex-basis属性，但仍无法让Safari浏览器显示超出可见屏幕的部分。是否存在flexbox的问题，我不得而知。还有什么其他的解决方法呢？

- jhamm

Answer 1

看起来这是Safari浏览器的一个bug。尝试在img中添加flex-shrink: 0。

img {
    height: auto;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

为了支持较旧版本的Safari浏览器，需要使用webkit前缀 -- 我会像James建议的那样，将其添加到.flex中（自己要记得升级Safari）。

- Joseph

---

我想要完全相反的效果，换句话说，我宁愿在所有浏览器中都出现Safari的错误。如何在其他浏览器中重新创建它？有什么想法吗？期望的行为：当调整为较小的视口时，项目将卡在视口的边界之间，并且彼此靠近。 - Ali Somay

Answer 2

我认为Safari需要使用-webkit选项才能正常工作。例如：

.flex {
  display: flex;
  display: -webkit-flex;
}

img {
  height: auto;
}

这对所有选项都是相同的。例如：

justify-content: center;
-webkit-justify-content: center;
align-items: stretch;
-webkit-align-items: stretch;

这个页面是flexbox的一个很好的参考来源：

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

- James McCormac

---

那没有解决问题。它看起来仍然一样。 - jhamm