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 img占据了它们的自然宽度并且比屏幕更大。这就是我希望它的工作方式。使用Safari时，flexbox只占用viewport个完整宽度。我已经尝试设置图像宽度，基于flex，但不能使Safari使用的不仅仅是可见屏幕。是否存在我不了解的flexbox问题？我还能做什么？

Answer 1

看起来这是Safari中的一个错误。尝试将flex-shrink: 0添加到img。

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

使用webkit前缀来支持旧的Safari浏览器 - 我也将它添加到.flex，就像詹姆斯建议的那样（请注意自己：升级Safari）。

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

为什么我在Safari和Chrome中使用flexbox获得不同的行为？

2 个答案: