Flexbox không gói các vật phẩm flex

Question

Tôi đang cố gắng thiết lập bố cục cho trang web của mình bằng cách sử dụng flexbox (inb4: Tôi không quan tâm đến IE) nhưng vì một số lý do các mục không được gói.

http://jsfiddle.net/EnUuA/

section { display:-webkit-flex; -webkit-flex-flow: row wrap; width: 200px; /* ... */ } 
div { -webkit-flex: 1; width:48%; /* ... */ } 

Tôi đã thử đặt một chiều rộng trong px và tôi đã cố gắng loại bỏ chiều rộng hoàn toàn .. vẫn không quấn!

Vì vậy,, làm cách nào để có được các hộp flexbox bọc trong hộp chứa của chúng?

Xin vui lòng, trước khi trả lời, hãy đảm bảo câu trả lời của bạn thực sự sử dụng flexible box model và không chỉ cho tôi các yếu tố cấp khối.

Answer 1

Có vẻ như (tính đến hôm nay) thuộc tính flex-flow là thuộc tính không có trong Firefox (ít nhất là phiên bản CR 2012).

Bạn có thể thấy gói trong fiddle này hoạt động trong Opera/Chrome, tuy nhiên.

Safari hàng đêm cũng có nó hoạt http://nightly.webkit.org

[sửa] ngu ngốc Compass quên các tiền tố

Tài liệu tham khảo:

https://developer.mozilla.org/en-US/docs/CSS/flex https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes

NB như của FF 21.0a1 nó không hỗ trợ flex-wrap

Ít nhất bạn có thể xác nhận các công trình bất động sản:

http://jsfiddle.net/M7yLn/1/