box-ordinal-group
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Warning: Đây là thuộc tính thuộc bản thảo đặc tả gốc của CSS Flexible Box Layout Module. Nó đã được thay thế trong đặc tả. Xem flexbox để biết thông tin về tiêu chuẩn hiện hành.
Thuộc tính CSS box-ordinal-group gán các phần tử con của flexbox vào một nhóm thứ tự.
Các nhóm thứ tự có thể được sử dụng kết hợp với thuộc tính box-direction để kiểm soát thứ tự hiển thị của các phần tử con trực tiếp của hộp. Khi box-direction tính toán là normal, hộp sẽ hiển thị các phần tử của nó bắt đầu từ nhóm thứ tự có số thấp nhất và đảm bảo rằng các phần tử đó xuất hiện bên trái (đối với hộp ngang) hoặc ở trên cùng (đối với hộp dọc) của container. Các phần tử trong cùng nhóm thứ tự được hiển thị theo thứ tự chúng xuất hiện trong cây tài liệu nguồn. Theo hướng ngược lại, các nhóm thứ tự được xem xét theo cùng thứ tự, ngoại trừ các phần tử xuất hiện theo chiều ngược lại.
Cú pháp
/* <integer> values */
box-ordinal-group: 1;
box-ordinal-group: 5;
/* Global values */
box-ordinal-group: inherit;
box-ordinal-group: initial;
box-ordinal-group: unset;
Thuộc tính box-ordinal-group được chỉ định là bất kỳ <integer> dương nào.
Định nghĩa hình thức
| Initial value | 1 |
|---|---|
| Applies to | children of box elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
box-ordinal-group =
<integer>
<integer> =
<number-token>
Ví dụ
Ví dụ sử dụng cơ bản
Trong phiên bản cũ hơn của đặc tả, box-ordinal-group được đưa vào để cho phép bạn thay đổi thứ tự hiển thị của các phần tử con flex bên trong flex container:
article:nth-child(1) {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
article:nth-child(2) {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}
Tương đương flexbox hiện đại là order.
Đặc tả
Không thuộc bất kỳ tiêu chuẩn nào.