Home > Article > Web Front-end > How to use css box-orient attribute
How to use css box-orient attribute
- 青灯夜游Original
- 2019-05-28 16:49:063309browse
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!