Home > Article > Web Front-end > How to use css box-orient attribute
css The box-orient property is used to specify whether the child elements of the box (box) should be arranged horizontally or vertically. The children of a horizontal box are displayed from left to right, while the children of a vertical box are displayed from top to bottom.
How to use the css box-orient attribute?
The box-orient attribute specifies whether the box's child elements should be arranged horizontally or vertically.
Syntax:
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
Attribute value:
horizontal: Arranges child elements from left to right in a horizontal row.
vertical: Arrange child elements vertically from top to bottom.
inline-axis: Arrange child elements along the inline axis (mapped to horizontal).
block-axis: Arrange child elements along the block axis (mapped to vertical).
inherit: The value of the box-orient attribute should be inherited from the parent element.
Description: The sub-elements in the horizontal box are displayed from left to right, while the sub-elements in the vertical box are displayed from top to bottom. However, box-direction and box-ordinal-group can change this order.
Note: Currently all mainstream browsers do not support the box-orient attribute. Firefox supports this via a private property - MOZ-box-orient. Safari, Opera, and Chrome are supported via the private property -webkit-box-orient.
css box-orient property example
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div { width: 350px; height: 150px; border: 1px solid black; /* Firefox */ display: -moz-box; -moz-box-orient: horizontal; /* Safari, Opera, and Chrome */ display: -webkit-box; -webkit-box-orient: horizontal; /* W3C */ display: box; box-orient: horizontal; } </style> </head> <body> <div> <p>段落 1。</p> <p>段落 2。</p> <p>段落 3。</p> </div> <p><b>注释:</b>IE 不支持 box-orient 属性。</p> </body> </html>
The above is the detailed content of How to use css box-orient attribute. For more information, please follow other related articles on the PHP Chinese website!