爲什麼我在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獲得不同的行爲？

回答

相關問題