How to horizontally align a specific flex item while others remain centered using CSS?

CSS Code Screenshot with example is here I have a container with the following CSS:

.container {  display: flex;  justify-content: center;  align-items: center;}.item-3 {  align-self: flex-end;}

Using the align-self property, I can move .item-3 vertically to the end. However, I also want to move it horizontally, for example, to the end, while keeping the other two items centered. Is there a specific property similar to align-self that can achieve this horizontal alignment for .item-3?

I tried using margin-left: auto but that is pushing away my centered items(item 1 and item 2).