Tại sao tôi nhận được hành vi khác trong Safari và Chrome bằng flexbox?

Question

Tôi đang hiển thị một hàng hình ảnh. Đây là tôi html:

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

ở đây là tôi css:

.flex { 
    display: flex 
} 

img { 
    height: auto; 
} 

Tôi muốn hình ảnh của tôi để hiển thị liên tiếp. Tôi đã không đưa ra bất kỳ chiều rộng nào của img, do đó, trên Chrome, img s chiếm chiều rộng tự nhiên của chúng và đẩy to hơn màn hình sau đó. Đây là cách tôi muốn nó hoạt động. Với Safari, chúng flexbox sẽ chỉ chiếm toàn bộ chiều rộng viewport. Tôi đã thử đặt chiều rộng hình ảnh, cơ sở flex, nhưng không thể làm cho Safari sử dụng nhiều hơn là chỉ màn hình hiển thị. Có vấn đề với flexbox mà tôi không biết? Tôi có thể làm gì nữa?

Answer 1

Hình như đây là một lỗi trong Safari. Thử thêm flex-shrink: 0 vào img.

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

Với tiền tố webkit để hỗ trợ các trình duyệt Safari cũ - Tôi muốn thêm nó vào .flex quá như james gợi ý (lưu ý để tự: nâng cấp Safari).

Answer 2

Tôi nghĩ safari cần các tùy chọn -webkit để nó hoạt động. ví dụ.

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

img { 
    height: auto; 
} 

Điều này cũng giống nhau đối với tất cả các tùy chọn. ví dụ.

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

Trang này là một nguồn tham khảo tốt đẹp cho flexbox:

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