I know this is not an answer, but I'd like to contribute to this matter for what it's worth. It would be great if they could release justify-self
for flexbox to make it truly flexible.
It's my belief that when there are multiple items on the axis, the most logical way for justify-self
to behave is to align itself to its nearest neighbours (or edge) as demonstrated below.
I truly hope, W3C takes notice of this and will at least consider it. =)
This way you can have an item that is truly centered regardless of the size of the left and right box. When one of the boxes reaches the point of the center box it will simply push it until there is no more space to distribute.
The ease of making awesome layouts are endless, take a look at this "complex" example.