Have you ever tried scrolling horizontally a list of flex items that are justify-center
and end up with the first item not shown or partially hidden.
Well, it just happened to me while working on staking crypto.
Well this is very annoying, but fortunately enough, here is the solution to this problem in 3 simple steps.
For Tailwind
- Remove
justify-center
from the parent element - Apply
ml-auto
to the first element - Apply
mr-auto
to the last element
Tailwind having great utility classes, this can just be done in one step
- Replace
justify-center
by[&>*:first-child]:ml-auto [&>*:last-child]:mr-auto
Here is a Playground
For CSS
- Remove
justify-content:center
from the parent element - Apply
margin-left: auto
to the first element - Apply
margin-right: auto
to the last element
Who am I?
My name is Martin Ratinaud and Iām a freelance senior software engineer and remote enthusiast, contagiously happy and curious.
I create websites like this one for staking crypto and many more...
Also, I'm always looking for new challenges or MVP to create. Hire me !
Top comments (0)