Thread by @JoshWComeau

🌠 Keep navigation centered in a lopsided container (logo on one side, nothing on the other) with Flexbox!

“Asymmetrical centering” like this has befuddled me for a long time, but I've cracked the code: `flex-basis` is key 🔓🗝

Demo + Code: codepen.io/joshwcomeau/pe…

When `flex-basis` is set to `0`, it distributes ALL space, not just empty space.

So: we put columns on either side of the nav, make them greedy with `flex-grow`, and distribute the space with `flex-basis`:

.column {
flex-grow: 1;
flex-basis: 0;
}

(Image credit: w3 dot org)

(You can also use `flex: 1` instead, but that shorthand obfuscates what's really going on here!)

Another nifty trick: The nav items "fan out" as the window gets larger, thanks to viewport-based gap sizes:

nav {
display: flex;
gap: max(calc(10vw - 60px), 16px);
}

How it works:

→ `gap` adds space between flex siblings
→ The `vw` unit scales with viewport
→ We crank up the scaling impact by picking a big number (10vw) and subtracting a fixed value (60px) using `calc`
→ To avoid having negative gap on small screens, we clamp it to 16px

I'm currently building a CSS course, “CSS for JavaScript Developers”!

The course features a number of in-depth workshops, and for the Flexbox module, we build an e-commerce webapp! It uses these tricks (among others) for its primary nav 🔥

→ Learn more: css-for-js.dev

Final little note: `gap` isn't supported in Safari, though they just added it to their Technology Preview, so it's on the way! In the meantime, you can use margin:

.nav-item:not(:last-of-type) {
margin-right: max(calc(10vw - 60px), 16px);
}