How to use css box-orient attribute-CSS Tutorial-php.cn

How to use css box-orient attribute

青灯夜游

Release： 2019-05-28 16:49:06

Original

3328 people have browsed it

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 css box-orient attribute

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;

Copy after login

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>

Copy after login

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!