2013-07-16 26 views
8

Theo Mozilla's own documentation:Flex-wrap polyfill cho Firefox

Firefox chỉ hỗ trợ single-line flexbox.

Tuy nhiên, tôi muốn bắt đầu sử dụng flexbox vì đây là lúc mostly supported by all modern browsers (Tôi không cần nhắm mục tiêu IE 9 cho dự án này một cách may mắn).

Vì Firefox chỉ hỗ trợ flexbox một dòng, lợi ích duy nhất tôi nhận được từ việc sử dụng nó là justify-content và có thể là align-items. Theo tôi, sức mạnh thực sự của flexbox là flex-flowflex-wrap, cho phép bố cục đáp ứng.

Thực ra, tôi đã thử sao chép Holy Grail Layout example từ tài liệu Mozilla và mở nó trong Firefox và thậm chí nó không hoạt động đúng ở đó. Các order thay đổi nhưng nó vẫn cho thấy ba yếu tố trong một hàng thay vì thay đổi flex-flow.

câu hỏi liên quan: Flexbox not wrapping flex items

Tôi khá chắc chắn rằng hầu hết các đối tượng mục tiêu của tôi là trên Internet Explorer, Firefox, và Safari cho iOS. Có một polyfill mà tôi có thể sử dụng cho Firefox để có được hành vi mong muốn hoặc tôi có phải dự phòng cho float s, width s và clear bản sửa lỗi bằng Modernizr (và nếu vậy, tôi thậm chí còn tìm gì trong Modernizr?)

Trả lời

13

Không polyfill cần thiết nữa: flex-wrap: wrap cho Firefox 28 và lên là cố định, xin vui lòng xem thêm câu trả lời của tôi here.

Fix cho các trình duyệt cũ: Đối với "solved by flexbox" demo Philip Walton sử dụng một polyfill CSS đơn giản: @supports not (flex-wrap: wrap) chỉ nhắm mục tiêu các trình duyệt không có sự hỗ trợ cho flex-wrap: wrap, và như xa như tôi hiểu nó: display: inline-block được sử dụng để thay thế.

+0

Liên kết nguồn bị hỏng, nhưng cảm ơn vì '@supports not (flex-wrap: wrap)' –

0

Tính năng này chưa sẵn sàng trên Firefox, như bạn đã biết. Tôi đã không tìm thấy bất kỳ polyfill flex-wrap nào được nêu ra. Nhưng tôi biết vấn đề tăng cường chính xác cho việc triển khai Flex-wrap của Firefox.

Xin vui lòng, bất cứ ai muốn tính năng này nên bỏ phiếu vào liên kết dưới đây bằng cách thêm mình vào danh sách CC:

Firefox - Support multi-line flexbox (flex-wrap, align-content properties)

Các vấn đề liên quan