How to use the flex-direction attribute in css
This article mainly introduces how to use the flex-direction attribute in css. It is very detailed and has a certain reference value. Friends who are interested must finish it!
How do I use the cssflex-direction attribute?
Definition and usage
The flex-direction attribute specifies the direction of the flexible project.
Note: if the element is not an element of the elastic box object, the flex-direction attribute has no effect.
Default value: row
Inheritance: no
Animated: no.
Version: CSS3
JavaScript syntax:
Object.style.flexDirection= "column-reverse"
CSS syntax
Flex-direction:row | row-reverse | column | column-reverse | initial | inherit
Attribute value
Row default value. Flexible items will be displayed horizontally, just like a line.
Row-reverse is the same as row, but in reverse order.
Column flexible items will be displayed vertically, just like a column.
Column-reverse is the same as column, but in reverse order.
Initial sets this property to its default value.
Inherit inherits this attribute from the parent element.
Case study
Set the direction of the elastic box elements within the element to the opposite order:
# main {
Width:400px
Height:400px
Border:1pxsolid#c3c3c3
Display:-webkit-flex;/*Safari*/
-webkit-flex-direction:row-reverse;/*Safari6.1+*/
Display:flex
Flex-direction:row-reverse
}
# maindiv {
Width:50px
Height:50px
}
A
B
C
D
E
F
The above is all the content of the article "how to use the flex-direction attribute in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
