As the title suggests, this brief blog post is about my web dev spacing tool-of-choice: The Flex box. I’ve got it down to a science now. It’s engrained in my head. Don’t even need to look up its cheat sheet at this point. (About time…)
If I want something left, center, and right; no problem. Left side and ride side; even easier. Front and center; justify-center (in Tailwind.css). Text in a row with images; use items-center on the flex container div. Then, if an image doesn’t line up precisely how you want it, add a margin-top with a few positive or negative pixels. All of this is in my head now.
Even accounting for responsiveness has gotten pretty easy. One trick I picked up recently is to only add margin-right when spacing items, because margin-left will add unwanted space if the container div fills up and moves your text/items to the next line via flex-wrap. And no one wants an uneven looking UI when the wrappin’ happens.
I’m relieved to feel comfortable and confident with creating layouts, as .css tasks always seems to take FOREVER. Way longer than figuring out JavaScript logic. It doesn’t seem to make any rational sense, but I guess when you’re trying to make everything look perfect and presentable on all screen sizes, it’s time-consuming. ESPECIALLY when there’s mistakes with the layout and you’re not sure why. Time tossed down the tube, so to speak…
Hence, why it feels good. Saving time going forward. But now that I write this, maybe it shouldn’t feel THAT good. I don’t actually have any pages left to build in my app… That part of the coding equation is complete…
Damn you .css… Always a thorn in my side…
