box-direction
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 của bản thảo Module bố cục hộp linh hoạt CSS ban đầu, và đã được thay thế bởi một tiêu chuẩn mới hơn. -moz-box-direction chỉ được sử dụng cho XUL trong khi tiêu chuẩn trước đó box-direction đã được thay thế bởi flex-direction. Xem flexbox để biết thông tin về tiêu chuẩn hiện tại.
Thuộc tính box-direction CSS chỉ định liệu một hộp bố cục nội dung của nó theo hướng bình thường (từ cạnh trên hoặc trái), hay theo hướng ngược lại (từ cạnh dưới hoặc phải).
Cú pháp
/* Giá trị từ khóa */
box-direction: normal;
box-direction: reverse;
/* Giá trị toàn cục */
box-direction: inherit;
box-direction: initial;
box-direction: revert;
box-direction: revert-layer;
box-direction: unset;
Thuộc tính box-direction được chỉ định bằng một trong các giá trị từ khóa liệt kê dưới đây.
Giá trị
Ghi chú
Cạnh của hộp được chỉ định là start cho mục đích bố cục phụ thuộc vào hướng của hộp:
- Đối với phần tử ngang, start là cạnh trên.
- Đối với phần tử dọc, start là cạnh trái.
Cạnh đối diện với start được gọi là end.
Nếu hướng được đặt bằng thuộc tính dir của phần tử, thì style sẽ bị bỏ qua.
Định nghĩa hình thức
| Initial value | normal |
|---|---|
| Applies to | elements with a CSS display value of box or inline-box |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
box-direction =
normal |
reverse
Ví dụ
Đặt hướng hộp
.example {
/* bottom-to-top layout */
-moz-box-direction: reverse; /* Mozilla */
-webkit-box-direction: reverse; /* WebKit */
box-direction: reverse; /* As specified */
}
Thông số kỹ thuật
Không thuộc bất kỳ tiêu chuẩn nào.