The simple way to center a flex item is using center
for justify-content
or align-content
.
When we use center
with dynamic flex items, there is a chance of data loss when the items overflow the alignment container.
Safe alignment
To avoid the data loss when the items overflow, we can use the safe
keyword along with center
justify-content: safe center
Now this will help us center the items when there is no overflow and it will use start
when the flex-items start overflowing.
This will help us prevent the data loss.
using with tailwindcss
In case if we want to safe alignment with tailwind justify-center-safe
and justify-end-safe
.
Hope this is helpful.
Versions of Language/packages used in this post.
Library/Language | Version |
---|---|
tailwind | 4.1 |