.container {
display: flex;
flex-direction: row-reverse;
}The direction of the flexible items inside the .container is set in reverse order.justify-content is always working on a main axis.
It means, that when flex-direction: column;, then justify-content property aligns items verticallyflex-direction: column;, then flex-basis means flex item box heightflex-flow property is a shorthand property for: flex-direction and flex-wrapmin-width property there will be a scroll when box's width is less then specified width valueDefault value is 1.logout item will grow twice as quick as .home item.home {
flex-grow: 1;
}
.logout{
flex-grow: 2;
}nowrap is the default value of the property.
The value Specifies that the flexible items will not wrap.
Resource: https://youtu.be/k32voqQhODc?t=1154