Perché sto ottenendo un comportamento diverso in Safari e Chrome con Flexbox?

Question

Sto visualizzando una fila di immagini. Qui è la mia html:

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

Ecco la mia css:

.flex { 
    display: flex 
} 

img { 
    height: auto; 
} 

voglio le mie immagini da visualizzare in una riga. Non ho dato la larghezza di img s, quindi su Chrome i img s riprendono la loro larghezza naturale e spingono fuori più grande dello schermo. Questo è il modo in cui voglio che funzioni. Con Safari, il valore di flexbox occuperà solo la larghezza di viewport. Ho provato a impostare una larghezza dell'immagine, base flessibile, ma non posso fare in modo che Safari usi più dello schermo visibile. C'è un problema flexbox che non conosco? Cos'altro posso fare?

Answer 1

Sembra che questo è un bug in Safari. Prova ad aggiungere flex-shrink: 0 a img.

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

Con prefisso webkit per sostenere anziani browser Safari - che vorrei aggiungere a .flex anche come James suggerisce (nota a sé: l'aggiornamento di Safari).

Answer 2

Penso che Safari abbia bisogno delle opzioni -webkit per farlo funzionare. per esempio.

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

img { 
    height: auto; 
} 

Questo è lo stesso per tutte le opzioni. per esempio.

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

Questa pagina è una fonte di riferimento piacevole per FlexBox:

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