CSS3 box-direction property
Examples
From right to left, to display a div box child elements:
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;
}
{
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;
}
try it"
Browser Support
The current mainstream browser does not support box-direction properties.
Internet Explorer 10 private property by the -ms-flex-direction support.
Firefox by private property - MOZ-box-direction support.
Safari and Chrome by private property -WebKit-box-direction properties.
Note: Internet Explorer 9 and earlier versions of IE do not support flexible box.
Attribute definitions and instructions
box-direction attribute specifies the child elements of which direction the display box.
Defaults: | normal |
---|---|
Inherited: | no |
version: | CSS3 |
JavaScript syntax: | object .style.boxDirection = "reverse" |
grammar
box-direction: normal | reverse | inherit;
value | description |
---|---|
normal | In the default orientation display sub-elements. |
reverse | In the opposite direction for child elements. |
inherit | You should inherit the property value box-direction from the sub-elements |