flex-wrap không hoạt động như mong đợi trong Safari

Question

Trên trang chủ của http://www.shopifyexperte.de/ có hai mô-đun hộp flex, một mô-đun dưới "Kundenstimmen" và một trong "Neueste Beiträge ...". Các hộp bên trong được cho là để bọc khi chúng đi dưới 220px và không phát triển trên 30% chiều rộng. Tính năng này hoạt động trong Chrome, FF và Opera mới nhất (tất cả trên Mac), nhưng trong Safari 8.0.5 (Mac) và bất kỳ trình duyệt iOS nào, các hộp không bao giờ tạo thành hàng ngay cả khi có đủ chỗ. Họ luôn luôn quấn, mỗi một trên một hàng của riêng mình.

CSS cho container:

.homepage-testimonial-container { 
 
\t display: flex; 
 
\t display: -webkit-flex; 
 
\t -webkit-flex: 1; 
 
\t flex: 1; 
 
\t -webkit-flex-direction: row; 
 
\t flex-direction: row; 
 
\t -webkit-flex-wrap: wrap; 
 
\t flex-wrap: wrap; 
 
\t -webkit-justify-content: space-between; 
 
\t justify-content: space-between; 
 
\t -webkit-align-items: flex-start; 
 
\t align-items: flex-start; 
 
\t margin-top: 1em; 
 
}

Các CSS cho các hộp bên trong container:

.homepage-testimonial { 
 
\t margin-bottom: 1em; 
 
\t min-width: 220px; 
 
\t max-width: 30%; 
 
\t -webkit-flex: 1 1 auto; 
 
\t flex: 1 1 auto; 
 
}

Nếu tôi d isable -webkit-flex-wrap (hiệu quả thiết lập nó để nowrap), tất cả các hộp xếp hàng trong một hàng nhưng cuối cùng tràn container khi cửa sổ trình duyệt được quá hẹp.

Đây có phải là một loại lỗi trong Safari/Webkit hay tôi đang làm điều gì đó sai ở đây?

Answer 1

Dường như đây là lỗi trong Safari. Trong một vấn đề riêng biệt, tôi đã thử nghiệm bằng cách sử dụng chiều rộng tối thiểu thay cho auto trong các dòng nơi bạn nói điều gì đó như -webkit-flex: 1 1 auto;.

Câu hỏi này có một số thông tin: https://stackoverflow.com/a/30792851/756329

Answer 2

yếu tố Set đứa trẻ như thế này dường như làm việc cho tôi

flex: 1 0 auto; 

Answer 3

Thiết flex-basis: 20em cũng làm việc, min-width: 20em không.

Answer 4

Đây thực sự là lỗi Safari. Các chi tiết được cung cấp tại các xuất sắc flexbugs trang, nhưng trích dẫn nó:

Safari sử dụng min/max tờ khai rộng/chiều cao cho thực sự render kích thước của mặt hàng flex, nhưng nó bỏ qua những giá trị khi tính bao nhiêu các mặt hàng phải nằm trên một dòng của hộp chứa đa dòng . Thay vào đó, nó chỉ đơn giản sử dụng giá trị cơ sở flex của mặt hàng, hoặc chiều rộng nếu cơ sở flex được đặt thành tự động.

Vì vậy, việc sửa chữa/workaround - theo đề nghị của câu trả lời khác ở đây - là để thiết lập flex-basis đến một chiều rộng rõ ràng chứ không phải là auto.

Answer 5

Tôi gặp sự cố tương tự trong Safari (9.1.3) với hệ thống lưới Bootstrap 3 (ví dụ: col-md-4) kết hợp với flex. Tôi đã giải quyết nó bằng cách đặt margin: 0 -1px; trên các mục col và flex-wrap: wrap; trên trình bao bọc.

Answer 6

Tôi đang sử dụng Safari 11.0.1 và lỗi vẫn tồn tại. Tôi sử dụng Bootstrap 3 kết hợp với màn hình: flex trên các phần tử .row của tôi. Tôi thêm vào sau để css của tôi để nhắm mục tiêu các yếu tố cột. Dường như có một cái gì đó về tỷ lệ phần trăm chiều rộng trong Safari không được vinh danh chính xác.

.row [class*=col-]{ 
    margin:0 -.3px; 
}