Đặt hàng - Thủ thuật CSS

Anonim

Các orderbất động sản là một tiểu tài sản của các mô-đun linh hoạt Box Layout.

Các mục linh hoạt được hiển thị theo thứ tự như chúng xuất hiện trong tài liệu nguồn theo mặc định. Các orderbất động sản có thể được sử dụng để thay đổi trật tự này.

Cú pháp

order: .flex-item ( order: 2; )

Bản giới thiệu

Bản trình diễn sau đây cho thấy đơn đặt hàng mặc định (1, 2, 3, 4, 5) đã được thay đổi như thế nào bằng cách đặt thuộc tính đơn hàng cho từng mục.

Kiểm tra cây bút này!

Hỗ trợ trình duyệt

  • (hiện đại) có nghĩa là cú pháp gần đây từ đặc tả (ví dụ display: flex;)
  • (hybrid) có nghĩa là một cú pháp không chính thức kỳ lạ từ năm 2011 (ví dụ display: flexbox;:)
  • (cũ) có nghĩa là cú pháp cũ từ năm 2009 (ví dụ display: box;)
Trình duyệt Chrome Safari Firefox Opera I E Android iOS
21+ (hiện đại)
20- (cũ)
3.1+ (cũ) 2-21 (cũ)
22+ (mới)
12.1+ (hiện đại) 10+ (kết hợp) 2.1+ (cũ) 3.2+ (cũ)

Trình duyệt Blackberry 10+ hỗ trợ cú pháp mới.

Để biết thêm thông tin về cách kết hợp các cú pháp để nhận được hỗ trợ trình duyệt tốt nhất, vui lòng tham khảo bài viết này (CSS-Tricks) hoặc bài viết này (DevOpera).