Home > Article > Web Front-end > CSS flex-direction property of Flexible flexible box model
Set the direction of the flexbox elements within the e388a4556c0f65e1904146cc1a846bee element to the reverse order:
p { display:flex; flex-direction:row-reverse; }
Effect preview
The number in the table indicates the first browser that supports the attribute The version number of the server.
The number immediately following -webkit-, -ms- or -moz- is the first version that supports this prefix attribute.
Attributes | |||||
---|---|---|---|---|---|
flex-direction | 29.0 21.0 -webkit- |
11.0 10.0 -ms- |
28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
The flex-direction property specifies the direction of the flexible item.
Note: If the element is not an element of the flexbox object, the flex-direction property has no effect.
Default value: | row | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
##Inherited : | No||||||||||||||||||||||
: No. See SS3 animation properties, | CSS3 animationexamples. | |||||||||||||||||||||
CSS3 | ||||||||||||||||||||||
object | .style.flexDirection="column-reverse" Effect preview |
Value | Description | Instance |
---|---|---|
row | default value. Flexible items will appear horizontally, as a row. | Effect preview |
row-reverse | Same as row, but in reverse order. | Preview |
column | Flexible items will appear vertically, just like a column. | Effect preview |
column-reverse | Same as column, but in reverse order. | Effect preview |
initial | Set this property to its default value. See initial. | Effect Preview |
inherit | Inherit this attribute from the parent element.See inherit. | |
The above is the detailed content of CSS flex-direction property of Flexible flexible box model. For more information, please follow other related articles on the PHP Chinese website!