When it comes to the layout below, my objective is to always keep the middle item centered within the container div. This means that the left and right items should be aligned to the far left and right of the container respectively.
The current styling for the container, however, results in even spacing between the elements, causing the middle element to not stay perfectly centered. The desired outcome would have more space between the left and middle elements compared to the right and middle element, with the middle element staying centered at all times.
How can I achieve this?
display: flex;
justify-content: center;
align-items: center;
.left {
margin-right: auto;
justify-self: center;
align-self: center;
}
.right {
margin-left: auto;
justify-self: center;
align-self: center;
}