English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
By setting the direction of the main axis of the flex container, flex-The direction CSS property specifies how flex items are placed within a flex container.
The following table provides usage instructions and version history for this property, as well as the syntax used for the property in JavaScript scripts.
| Default value: | row |
|---|---|
| Applies to: | Flexible container |
| Inheritance: | None |
| Animatable: | No.See also Animation properties. |
| Version: | CSS3new feature |
| JavaScript syntax: | object.style.flexDirection="row-reverse" |
The syntax of this attribute is as follows:
flex-direction: row | row-reverse | column | column-reverse | initial | inherit
The following examples demonstrate how to use flex-direction attribute.
.flex-container {
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
}Test see‹/›The following table describes the value of this attribute.
| Value | Description |
|---|---|
| row | The main axis of the flex container is in the same direction as the inline axis of the current writing mode, that is, the text direction. |
| row-reverse | Same as row, but the start and end points of the axis are reversed. |
| column | The main axis of the flex container is in the same direction as the block axis of the current text direction (the vertical axis in horizontal writing mode and the horizontal axis in vertical writing mode). |
| column-reverse | Same as columns, but the start and end points of the axis are reversed. |
| initial | Set this property to its default value. |
| inherit | If specified, the associated elements adopt the flex of their parent element-The direction attribute values. |
flex-The compatibility of the direction attribute of browsers, the numbers in the following table represent the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.
|
Please refer to the following tutorials:CSS3Multi-column layout.
Related properties:align-content,align-items,align-self,display,flex,flex-basis,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.