CSS Code I have a container with the following CSS:
<code>.container {
display: flex;
justify-content: center;
align-items: center;
}
.item-3 {
align-self: flex-end;
}
</code>
<code>.container {
display: flex;
justify-content: center;
align-items: center;
}
.item-3 {
align-self: flex-end;
}
</code>
.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).
New contributor
Shahzaib Memon is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.