justify-content / align-items vs margin: auto
When we solve issues of alignment we like to use alignment properties such as justify-content or align-items. Only a few people know these properties can lead to losing data, particularly frequently, when vertical alignment.
This is due to how these properties work. This process includes the two terms. The first, the alignment container is an element to that you declare the alignment properties.
The second, the alignment subject is elements that are inside of the alignment container. The alignment properties affect them.
So there is the case when the alignment subjects' sizes are larger than the alignment container's sizes. In the default alignment mode, it'll lead to overflow and loss of data. So users will see the cropped element.
I created the example with the modal element to show this behavior. At first, the text is short. But when we make it more we lose the heading and the close button.
We can fix it using auto margins because it uses extra space to align elements and doesn't lead to overflow. Take a look at how elements are no longer lost.
don't do this
<div class="modal">
<div class="modal__main">
<!-- modal childs -->
</div>
</div>
.modal {
display: flex;
justify-content: center;
align-items: center;
}
you can use this instead
<div class="modal">
<div class="modal__main">
<!-- modal childs -->
</div>
</div>
.modal {
display: flex;
}
.modal__main {
margin: auto;
}
P.S.
✉️ I love to help people learn more about HTML/CSS. If you have any questions, please, use my email for communication 👉 melnik909@ya.ru. It's free
💪 Discover more free things from me