4 ms·
It seems like in the example widgets baseline and flex-start appear the same. But according to https://stackoverflow.com/questions/34606879/whats-the-difference
by quickthrower2 4y ago
It seems like in the example widgets baseline and flex-start appear the same. But according to https://stackoverflow.com/questions/34606879/whats-the-difference-between-flex-start-and-baseline https://stackoverflow.com/questions/34606879/whats-the-diffe... they do different things. Josh's examples have text in them, so why is it not aligning to the baseline of that text?
Windows 11/Latest Chrome FWIW :-)
- joshwcomeau 4y agoYeah, I was worried people would wonder about this! It doesn't appear to have an effect in this example because all of the text is the same size (and therefore, they do all share the same baseline). In the devtools, try bumping one of the items up to font-size: 2rem, and you'll see the effect it has. My initial version of this post didn't have “baseline” as an option, since yeah it doesn't demonstrate it well, but I figured people would wonder why a single value was excluded. Incidentally, baseline alignment is so handy, but I couldn't fit everything into this post. We cover it in more detail in my course (https://css-for-js.dev/ https://css-for-js.dev/)
- joshwcomeau 4y agoPushing an update now that sets different font sizes for the 4 children, so that this can be observed!
- quickthrower2 4y agoThat is great, thanks. And thanks for this resource. If there is one thing I hate it is re-reading about flexbox. But playing with a widget is much more fun and tells me in 10 seconds what I need to know.