div { display: flex; flex-direction: row-reverse; }/* 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; .container { flex-direction: row | row-reverse | column | column-reverse; }flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; flex-direction: inherit; flex-direction: initial; flex-direction: unset;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.