Sie lesen die englische Version dieses Inhalts, da für dieses Gebietsschema noch keine Übersetzung vorhanden ist. Helfen Sie uns, diesen Artikel zu übersetzen!
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. The -moz-box-direction
will only be used for XUL while the previous standard box-direction
has been replaced by flex-direction
. See flexbox for information about the current standard.
The box-direction
CSS property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).
/* Keyword values */ box-direction: normal; box-direction: reverse; /* Global values */ box-direction: inherit; box-direction: initial; box-direction: unset;
Initial value | normal |
---|---|
Applies to | elements with a CSS display value of box or inline-box |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
The box-direction
property is specified as one of the keyword values listed below.
Values
normal
- The box lays out its contents from the start (the left or top edge).
reverse
- The box lays out its contents from the end (the right or bottom edge).
Formal syntax
normal | reverse | inherit
Examples
.example { /* bottom-to-top layout */ -moz-box-direction: reverse; /* Mozilla */ -webkit-box-direction: reverse; /* WebKit */ box-direction: reverse; /* As specified */ }
Notes
The edge of the box designated the start for layout purposes depends on the box's orientation:
Horizontal | left |
---|---|
Vertical | top |
The edge opposite to the start is designated the end.
If the direction is set using the element's dir
attribute, then the style is ignored.
Specifications
- Flexible Box Layout Module (W3C Working Draft) Note: The current state of this specification does not reflect Mozilla's or WebKit's older implementations.
- Old Flexible Box Layout Module Note: Mozilla and WebKit's implementations used to reflect this version of the specification.
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
box-direction | Chrome
Full support
1
| Edge
Full support
12
| Firefox
Full support
1
| IE No support No | Opera
Full support
Yes
| Safari
Full support
3
| WebView Android
Full support
≤37
| Chrome Android
Full support
18
| Firefox Android
Full support
4
| Opera Android
Full support
Yes
| Safari iOS
Full support
1
| Samsung Internet Android
Full support
1.0
|
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.