Loading…
13
Just realized fit-content beats flexbox for centering 90% of the nav bars I build
Everyone keeps reaching for flexbox or grid to center a nav, but I threw `width: fit-content; margin-inline: auto` on a header last Tuesday and it just worked in 2 lines with zero wrappers. Flex still wins when you need to space items apart, but for plain centering it's way more code than people admit. Anyone got a case where fit-content actually breaks on older Safari?
1 comments
Log in to join the discussion
Log In1 Comment
oscarm244d ago
Did your friend run into that Safari bug where fit-content on a block element just gets ignored? Mine did, on some older iOS version, the header stayed full width and looked fine at first so he shipped it, then got a nice little bug report a week later. Turned out adding `display: table` or wrapping the thing fixed it, which kinda kills the whole two line flex win. I still use fit-content for simple cases but I keep flex in my back pocket when the target browser list is sketchy. Safari has gotten better about it in newer versions but if you have to support older phones it can bite you.
5