Float right using flex-grow spacer
Every now and again, there is a situation where I want to make an HTML element float to the right. I could use CSS float
property; however its resulting behavior is sometimes counterintuitive and it requires something called "Clearfix hack".
As an alternative, I found it much more intuitive to use CSS Flexbox and a spacer element. All I need to do is:
- wrap all the items in a wrapper element that has CSS
display: flex
- insert to the list a spacer element that has CSS
flex-grow: 1
then that spacer will stretch out and push the subsequent elements to the right.
That's it.