.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-wrap
min-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