Take a look at this CSS Code Screenshot with an example. In my setup, I have a container styled with the following CSS properties:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.item-3 {
align-self: flex-end;
}
By using the align-self property, I can move .item-3 to the bottom vertically. However, what I also want is to shift it horizontally, for instance, all the way to the right, while still keeping the other two items centered. Is there a specific property similar to align-self that would help achieve this horizontal alignment for .item-3?
I attempted to use margin-left: auto but unfortunately, it ended up displacing my centered items (item 1 and item 2).