Hôm qua, tôi có một trang web trong trường học sử dụng câu lệnh flexbox CSS 3. Tôi chưa bao giờ sử dụng nó trước đây. Vì vậy, tôi đã tìm kiếm nó một chút và tìm thấy rất nhiều kiểu khác nhau của các câu lệnh flexbox.
Một số người viết display: box;, một số sử dụng display: flexbox;, và khác display: flex;.
Vì vậy, sự khác biệt là gì? Tôi nên sử dụng cái nào?
Câu trả lời:
Đây là những phong cách khác nhau.
display: box;là phiên bản của năm 2009.
display: flexbox;là phiên bản của năm 2011.
display: flex;là phiên bản thực tế.
Trích lời của Paul Ailen
Cảnh báo: Flexbox đã trải qua một số sửa đổi lớn, vì vậy bài viết này đã lỗi thời. Tóm lại, tiêu chuẩn cũ (Flexbox 2009) , dựa trên bài viết này, đã được triển khai trong Chrome kể từ phiên bản 4, Firefox kể từ phiên bản 2 và IE10 phiên bản beta.
Kể từ đó, tiêu chuẩn flexbox mới ra mắt và bắt đầu ra mắt trong Chrome 17. Stephan Hay đã viết một hướng dẫn về cách triển khai flexbox mới . Kể từ đó, thông số kỹ thuật đã trải qua các thay đổi đặt tên và bắt đầu xuất hiện trong Chrome 21. Chrome 22 có triển khai ổn định thông số kỹ thuật mới nhất.
Tại thời điểm này, thực hiện một trong hai rủi ro của nó , vì vậy hãy lưu ý.
Đây là blog về các câu lệnh flexbox khác nhau.
Đây là một mục blog bằng thủ thuật css về các phiên bản khác nhau.
Khi tôi sử dụng flexbox, tôi luôn viết nó như thế:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
Chỉnh sửa:
Vẫn không phải ai cũng có trình duyệt / thiết bị có khả năng xem bố cục flexbox. Vì vậy, đối với các giải pháp dự phòng hoặc các lựa chọn thay thế, có bài viết này của Kenan Yusuf về cách sử dụng flexbox mà không cần sử dụng flexbox .
-webkit-boxđến trước. Tuyên bố cuối cùng của bạn phải luôn là mới nhất hoặc Tiêu chuẩn W3C. Tuy nhiên, tôi khuyên bạn nên sử dụng -ms-flexboxsau -webkit-flexvì IE12 / Edge hỗ trợ -webkit-flex, nhưng về mặt kỹ thuật, bạn muốn IE sử dụng -ms-tiền tố thích hợp của nó thay vì -webkit-. Đó là một nitpick thận trọng chung mặc dù như display: flex; ở đây không bị ảnh hưởng bởi IE12.