box-orient
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, và đã được thay thế bởi một tiêu chuẩn mới hơn. Xem flexbox để biết thông tin về tiêu chuẩn hiện hành.
Thuộc tính CSS box-orient đặt liệu một phần tử bố trí nội dung của nó theo chiều ngang hay chiều dọc.
Cú pháp
/* Keyword values */
box-orient: horizontal;
box-orient: vertical;
box-orient: inline-axis;
box-orient: block-axis;
/* Global values */
box-orient: inherit;
box-orient: initial;
box-orient: unset;
Thuộc tính box-orient được chỉ định là một trong các giá trị từ khóa được liệt kê bên dưới.
Giá trị
horizontal-
Hộp bố trí nội dung của nó theo chiều ngang.
vertical-
Hộp bố trí nội dung của nó theo chiều dọc.
inline-axis(HTML)-
Hộp hiển thị các phần tử con của nó dọc theo trục nội tuyến.
block-axis(HTML)-
Hộp hiển thị các phần tử con của nó dọc theo trục khối.
Các trục nội tuyến và khối là các từ khóa phụ thuộc vào chế độ viết, trong tiếng Anh tương ứng với horizontal và vertical.
Mô tả
Các phần tử HTML DOM mặc định bố trí nội dung của chúng dọc theo trục nội tuyến. Thuộc tính CSS này chỉ áp dụng cho các phần tử HTML có giá trị display CSS là box hoặc inline-box.
Định nghĩa hình thức
| Initial value | inline-axis |
|---|---|
| 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-orient =
horizontal |
vertical |
inline-axis |
block-axis
Ví dụ
Đặt hướng hộp ngang
Ở đây, thuộc tính box-orient sẽ khiến hai phần <p>
HTML
<div class="example">
<p>I will be to the left of my sibling.</p>
<p>I will be to the right of my sibling.</p>
</div>
CSS
div.example {
display: -moz-box; /* Mozilla */
display: -webkit-box; /* WebKit */
display: box; /* As specified */
/* Children should be oriented vertically */
-moz-box-orient: horizontal; /* Mozilla */
-webkit-box-orient: horizontal; /* WebKit */
box-orient: horizontal; /* As specified */
}
Kết quả
Đặc tả
Không thuộc bất kỳ tiêu chuẩn nào.