CSS: Gravity field, or how to align nav items around a centered logo

Fellow freelancer Brice came up with an interesting challenge the other day: center heterogeneous nav items around a centered logo.

After a bit of fiddling about I came up with a solution: relative gravity!

So, it’s not quite as far fetched as Einstein’s theory, but the idea is to use flexbox order to split the nav items in two groups which we can then pull around the logo using negative margins… with a little voodoo… well, actually, that also is less far fetched, as it’s a simple margin: auto set on the adequate element.

See the pen.