box-orient property

Author admin Reading 2 min Views 486 Published by August 20, 2012 Modified by August 20, 2024

Contents

Definition and Usage
Syntax
Values
Examples

Definition and Usage

The box-orient property specifies whether the children of a box should be laid out horizontally or vertically.

Note: Children within a horizontal box are displayed from left to right, and children within a vertical box are displayed top to bottom. However, the box-direction and box-ordinal-group properties can change this ordering.

Default value:	inline-axis
Inherited:	no
Version:	CSS3
JavaScript syntax:	object.style.boxOrient=”vertical”

Syntax

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

Values

Value	Description
horizontal	Lay out children from left to right in a horizontal line
vertical	Lay out children from top to bottom vertically
inline-axis	Lay out children along the inline axis (map to horizontal)
block-axis	Lay out children along the block axis (map to vertical)
inherit	The value of the box-orient property should be inherited from the parent element

Examples

div { 
  
    width:350px; 
  
    height:100px; 
  
    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; 
  
}