Situation: Suppose there's a horizontal flexbox with some items. We wish to align all items to the left, except the last element which should be aligned to the right.
It's known that justify-self doesn't work in a Flexbox.
But there's still a way to achieve this effect.
Add the following styles to the last item:
#last-item {
margin-left: auto;
}
/* OR equivalently - do this from the flex container itself */
#my-flex-container:last-child {
margin-left: auto;
}
Situation: Suppose there's a horizontal flexbox with some items. We wish to align all items to the left, except the last element which should be aligned to the right.
It's known that
justify-selfdoesn't work in a Flexbox. But there's still a way to achieve this effect. Add the following styles to the last item:Soruce: https://medium.com/@iamryanyu/how-to-align-last-flex-item-to-right-73512e4e5912