box-flex-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-flex-group gán các phần tử con của flexbox vào một nhóm flex.
Đối với các phần tử linh hoạt được gán vào các nhóm flex, nhóm flex đầu tiên có giá trị là 1 và các giá trị cao hơn chỉ định các nhóm flex tiếp theo. Giá trị ban đầu là 1. Khi phân chia không gian thừa của hộp, trình duyệt trước tiên xem xét tất cả các phần tử trong nhóm flex đầu tiên. Mỗi phần tử trong nhóm đó được cấp thêm không gian dựa trên tỷ lệ độ linh hoạt của phần tử đó so với độ linh hoạt của các phần tử khác trong cùng nhóm flex. Nếu không gian của tất cả các phần tử con linh hoạt trong nhóm đã được tăng lên tối đa, quá trình này lặp lại cho các phần tử con trong nhóm flex tiếp theo, sử dụng bất kỳ không gian nào còn lại từ nhóm flex trước. Khi không còn nhóm flex nào nữa và vẫn còn không gian dư, không gian thừa được phân chia trong hộp chứa theo thuộc tính box-pack.
Nếu hộp bị tràn sau khi không gian ưu tiên của các phần tử con được tính toán, thì không gian bị xóa khỏi các phần tử linh hoạt theo cách tương tự như khi thêm không gian thừa. Mỗi nhóm flex được xem xét lần lượt và không gian bị xóa theo tỷ lệ độ linh hoạt của từng phần tử. Các phần tử không thu nhỏ dưới chiều rộng tối thiểu của chúng.
Cú pháp
/* <integer> values */
box-flex-group: 1;
box-flex-group: 5;
/* Global values */
box-flex-group: inherit;
box-flex-group: initial;
box-flex-group: unset;
Thuộc tính box-flex-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 | in-flow children of box elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
box-flex-group =
<integer>
<integer> =
<number-token>
Ví dụ
Ví dụ sử dụng cơ bản
Trong bản đặc tả flexbox gốc, box-flex-group có thể được dùng để gán các phần tử con flex vào các nhóm khác nhau để phân phối không gian linh hoạt:
article:nth-child(1) {
-webkit-box-flex-group: 1;
}
article:nth-child(2) {
-webkit-box-flex-group: 2;
}
Tính năng này chỉ từng được hỗ trợ trong các trình duyệt dựa trên WebKit với tiền tố, và trong các phiên bản sau của đặc tả, chức năng này không có tương đương. Thay vào đó, việc phân phối không gian bên trong container flex hiện được xử lý bằng flex-basis, flex-grow và flex-shrink.
Đặc tả
Không thuộc bất kỳ tiêu chuẩn nào.