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

我正在显示一排图像。这里是我的html：为什么我在Safari和Chrome中使用flexbox获得不同的行为？

<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问题？我还可以做些什么？

来源

2016-04-15 jhamm

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

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

随着WebKit的前缀支持旧的Safari浏览器上 - 我把它添加到.flex太詹姆斯建议（自我提醒：升级Safari浏览器）。

来源

2016-04-15 02:28:02 Joseph

我想完全相反，换句话说，我最好在所有浏览器中都有Safari错误。如何在其他浏览器中重新创建它？有任何想法吗？期望的行为：项目在视口的边界之间卡住，并在调整到较小的视口时更接近彼此。 –

我认为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

来源

2016-04-15 02:12:20

这并没有解决问题。它仍然看起来一样。 – jhamm

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

回答

相关问题