Flexbox for responsive design: Best choice with some caveats

Flexbox is very good and I think the best choice for responsive layout now. While CSS traditionally does stretch items out, and is better now with vw/vh, it still tends to work only in the horizontal dimension. Aything like stretching or centering vertically is a minefield of 10 year old A List Apart tutorials, CSS transform hacks that lead to suffering more often than I'd like, and StackOverflow cries for help. Flexbox in contrast stacks things pretty well in 2d. You can have N rows of M items easily and with way more, er, flexibility.

I did encounter some limitations though, in introducing Flexbox layout to player.fm's web app.

(a) It can't work like plain old text justification, in which everything is stretched except the final row/column. It fully stretches the last row/column element(s). A workaround involves padding the row with dummy elements, which I found to be a royal pain with live scrolling, but it works.

(b) It you set child element margins (eg for a card layout) they will also pad the side of the whole container! There's no collapse model like normal divs. Workaround is a wrapper with neg margins.

(c) Pinterest/G+ layout is not actually possible, contrary to most people's expectations. Well, it does work, but only if you don't care about the order or live scrolling. With pure CSS, the best you can do is stack the left column first, then the 2nd left etc. Furthermore, it won't be optimal layout like Masonry would produce. Flexbox can help with this kind of layout, but you'll still need JS to really do the job (which I haven't so far).

But for all that, it's still worth the learning curve and executing these workarounds if doing anything complex imo. It's very powerful and very compatible now if using a CSS precompiler.
Shared publiclyView activity