Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /nfs/c03/h06/mnt/47997/domains/jeffschram.com/html/wp-content/plugins/types/embedded/includes/wpml.php on line 624

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /nfs/c03/h06/mnt/47997/domains/jeffschram.com/html/wp-content/plugins/types/embedded/includes/wpml.php on line 641
Smarter Than Flexbox | Jeff Schram

Smarter Than Flexbox

Or “How I Fell in Love with A Nav”


Warning: count(): Parameter must be an array or an object that implements Countable in /nfs/c03/h06/mnt/47997/domains/jeffschram.com/html/wp-content/plugins/workbox-video-from-vimeo-youtube-plugin/workbox_video.php on line 192

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