box-direction property

Author admin Reading 1 min Views 386 Published by June 23, 2011 Modified by October 23, 2024

Contents

Definition and Usage
Syntax
Values
Examples

Definition and Usage

The box-direction property specifies the direction in which child elements of a box element are laid out.

Default value:	normal
Inherited:	no
Version:	CSS3
JavaScript syntax:	object.style.boxDirection=”reverse”

Syntax

 box-direction: normal|reverse|inherit;

Values

Value	Description
normal	Display the child elements in the default direction
reverse	Display the child elements in the reverse direction
inherit	The value of the box-direction property should be inherited from the parent element

Examples

div { 
  
    width:350px; 
  
    height:100px; 
  
    border:1px solid black; 
  
    /* Internet Explorer 10 */ 
  
    display:-ms-flexbox; 
  
    -ms-flex-direction:row-reverse; 
  
    /* Firefox */ 
  
    display:-moz-box; 
  
    -moz-box-direction:reverse; 
  
    /* Safari, Opera, and Chrome */ 
  
    display:-webkit-box; 
  
    -webkit-box-direction:reverse; 
  
    /* W3C */ 
  
    display:box; 
  
    box-direction:reverse; 
  
}