box-lines
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-lines xác định liệu hộp có thể có một hay nhiều dòng (hàng đối với hộp định hướng ngang, cột đối với hộp định hướng dọc).
Theo mặc định, hộp ngang sẽ bố trí các phần tử con của nó trong một hàng duy nhất, còn hộp dọc sẽ bố trí các phần tử con của nó trong một cột duy nhất. Hành vi này có thể được thay đổi bằng thuộc tính box-lines. Giá trị mặc định là single, có nghĩa là tất cả các phần tử sẽ được đặt trong một hàng hoặc một cột duy nhất, và bất kỳ phần tử nào không vừa sẽ bị coi là tràn.
Tuy nhiên, nếu giá trị multiple được chỉ định, thì hộp được phép mở rộng sang nhiều dòng (tức là nhiều hàng hoặc cột) để chứa tất cả các phần tử con của nó. Hộp phải cố gắng đặt các phần tử con của nó trên càng ít dòng càng tốt bằng cách thu nhỏ tất cả các phần tử xuống chiều rộng hoặc chiều cao tối thiểu của chúng nếu cần.
Nếu các phần tử con trong hộp ngang vẫn không vừa trên một dòng sau khi thu nhỏ xuống chiều rộng tối thiểu, thì các phần tử con được chuyển từng phần tử một sang một dòng mới, cho đến khi các phần tử còn lại trên dòng trước đó vừa. Quá trình này có thể lặp lại đến số dòng tùy ý. Nếu một dòng chỉ chứa một phần tử duy nhất không vừa, thì phần tử đó nên ở lại trên dòng đó và tràn ra ngoài hộp. Các dòng sau được đặt bên dưới các dòng trước trong các hộp hướng bình thường và bên trên trong các hộp hướng ngược. Chiều cao của một dòng là chiều cao của phần tử con lớn nhất trong dòng đó. Không có thêm khoảng cách nào giữa các dòng ngoài các lề trên các phần tử lớn nhất trong mỗi dòng. Để tính chiều cao của một dòng, các lề có giá trị tính toán là auto nên được xử lý như có giá trị 0.
Quá trình tương tự cũng xảy ra đối với các phần tử con trong hộp dọc. Các dòng sau trong các hộp hướng bình thường được đặt bên phải các dòng trước và bên trái trong các hộp hướng ngược.
Khi số lượng dòng đã được xác định, các phần tử có giá trị tính toán cho box-flex khác 0 sẽ kéo dài khi cần thiết để cố gắng lấp đầy không gian còn lại trên các dòng. Mỗi dòng tính toán các flex độc lập, vì vậy chỉ có các phần tử trên dòng đó mới được xem xét khi đánh giá box-flex và box-flex-group. Việc đóng gói các phần tử trong một dòng, như được chỉ định bởi thuộc tính box-pack, cũng được tính toán độc lập cho mỗi dòng.
Cú pháp
/* Keyword values */
box-lines: single;
box-lines: multiple;
/* Global values */
box-lines: inherit;
box-lines: initial;
box-lines: unset;
Thuộc tính box-lines được chỉ định là một trong các giá trị từ khóa được liệt kê bên dưới.
Giá trị
Định nghĩa hình thức
| Initial value | single |
|---|---|
| Applies to | box elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
box-lines =
single |
multiple
Ví dụ
Ví dụ sử dụng cơ bản
Trong phiên bản gốc của đặc tả, box-lines cho phép bạn chỉ định rằng bạn muốn các phần tử con của flex container xuống dòng sang nhiều dòng. Điều này chỉ được hỗ trợ trong các trình duyệt dựa trên WebKit với tiền tố.
div {
display: box;
box-orient: horizontal;
box-lines: multiple;
}
Tương đương flexbox hiện đại là flex-wrap.
Đặc tả
Không thuộc bất kỳ tiêu chuẩn nào.