Sắp xếp lại các yếu tố có chiều cao không xác định theo kiểu phản hồi tốt nhất với Flexbox. Trong khi hỗ trợ không phải là tuyệt vời cho các trình duyệt máy tính để bàn (IE là yếu tố hạn chế chính ở đây, hỗ trợ bắt đầu với v10), hầu hết các trình duyệt di động làm hỗ trợ nó.
http://cssdeck.com/labs/81csjw7x
@media (max-width: 30em) {
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
/* optional */
-webkit-box-align: start;
-moz-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.container .first {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
http://caniuse.com/#feat=flexbox
Hãy nhận biết rằng Flexbox có thể xung đột với các phương pháp bố trí khác, chẳng hạn như các kỹ thuật lưới điện thông thường. Các mục Flex được đặt để nổi có thể gây ra các kết quả không mong muốn trong các trình duyệt Webkit bằng cách sử dụng đặc điểm kỹ thuật năm 2009 (display: -webkit-box).