Smarter Than Flexbox

Or “How I Fell in Love with A Nav”

Currently enjoying a love affair with @ryanessmaker‘s navigation for the new TGD redesign.

I thought it used flexbox, but instead it’s much simpler, and much more clever(er)

The trick is to set text-align: justify on the ul so the children li elements are evenly spaced.

Then you need to make sure the ul takes up all available space. My first thought would be to simply make the ul display block at 100% width. But, no, I was so wrong. That don’t work.

Instead, Andy makes use of a pseudo element in the ul with a width of 100% and display inline-block. Therein lies the genius. I’ve never had a crush on a navigation, guess there’s a first time for everything