What is the difference?

What is the difference between
flex-direction: row-reverse;
flex-direction: row-reverse;
and
flex-direction: row;
justify-content: flex-end;
flex-direction: row;
justify-content: flex-end;
other than the change in order of the flex-items?
3 Replies
snxxwyy
snxxwyy6mo ago
flex-direction: row-reverse;
flex-direction: row-reverse;
will change the order of the flex items so the last item is at the start and the first at the end.
flex-direction: row;
justify-content: flex-end;
flex-direction: row;
justify-content: flex-end;
row is the default flex-direction property when you define flex on a container, justify-content: flex-end; will place the items at the end of the container along the horizontal axis.
nnnakuuul
nnnakuuulOP6mo ago
is there any other difference other than change in order?
snxxwyy
snxxwyy6mo ago
yes. with flex-direction: row-reverse;, it fills the container from the opposite side, placing the items at the end, hence reverse. justify-content: flex-end; places the flex children at the end of the container along the horizontal axis. They are different in the sense they are both meant for achieving different things.
Want results from more Discord servers?
Add your server