robohash image acting as kam's profile photo

Tip 033 - More on Flexbox


I wrote a little bit about flex-basis a month or two ago, but I suppose at the time it hadn't quite sunk in the sheer power of flexbox, and by extension, CSS as a whole. I figure this thought experiment is worth a whole blog post, so I'll save most of the pontificating for that and get to the point here.

Flexbox gives you a lot of options, both to be applied to the flex parent (the element with display:flex) and to the flex children (the direct children of display:flex). On the parent, you have options like which direction you want things to flow, how the items should align and justify themselves, and how the items will wrap to different lines. On the children you can define the order they display themselves, how much they're allowed to grow and shrink according to the available space, how much space the items will ideally take up, and how each item is aligned unique to the others. There is so much power here to create beautiful, adaptive layouts that resize themselves intrinsically. But to really understand how flexbox works the way it does, we need to talk about how different layout modes work. Specifically, what is "flow" and why is it different from flexbox, grid, or floats? What is the actual difference between inline and block? What does CSS do that the browser doesn't already do?

More on this .... next time.


Have you written a reply on another site? Put the URL here: