CSS Code 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).