xxxxxxxxxx
there are two flex direction
row is default.
column=> flex-flow:column
flex-directionn:row => main axis horizontal and cross axis vertical.
flex-direction:column=> main axis vertical and cross axis horizontal.
justify-content => is main axis property. It effects only main axis.
xxxxxxxxxx
/* The direction text is laid out in a line */
flex-direction: row;
/* Like <row>, but reversed */
flex-direction: row-reverse;
/* The direction in which lines of text are stacked */
flex-direction: column;
/* Like <column>, but reversed */
flex-direction: column-reverse;
/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: unset;
Flex-direction: Defines how flexbox items are ordered *within* a flexbox container.
Default flex-direction is row.
xxxxxxxxxx
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
Example: if you assume [ ] is the container
Row means left to right horizontally = [ A B C D]
Row-Reverse is reversed row = [ D C B A]
Column means stacked on top of each other vertically =
[A
B
C
D]
xxxxxxxxxx
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-direction
xxxxxxxxxx
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;