11–20 of 57 posts
https://internetingishard.com/html-and-css/flexbox/
I think often it is about finding a guide by an author who happens to explain things in the way that clicks with you. For me, this one really helped.
That suffering might be due to an unmet desire: that you should get fluency but not require training. As a programmer, you might feel that human repetition is a sign that something needs to be built to prevent that repetition. But, if you talk to a teacher, sports coach, martial artist, or anyone else who works in the domain of training meat-based deep neural nets to solve problems quickly and confidently, you'll find this is false. If you are seeking a feeling of speed and confidence, embrace repetition.
Perhaps, play https://flexboxfroggy.com/ 10 times.
Once flexbox understanding kicks-in, it becomes the most efficient way to create layouts by far.
Once flexbox understanding kicks-in, it becomes the most efficient way to create layouts by far.
For example, I was recently implementing a “small multiples” layout, showing many small charts of the same type, with the exact number depending on context. This seems like an ideal use case for flexbox: you can make good use of your available screen width, with everything lining up neatly, even spacing, but still wrapping to extra rows as needed.
Alas, it doesn’t always work quite like that. For example, suppose that we have a display that is wide enough to fit five items and we have 16 items to show. I don’t really want a layout with 5+5+5+1 items; using 4+4+4+4 would look much neater, without needing any more space. Unfortunately, while typographers have been wrangling with this sort of problem for a long time, flexbox doesn’t have any awareness of it at all.
OK, so I have to live with 5+5+5+1 for now if I want to use flexbox. In that case, it would be nice to control the justification of the final line, for example having additional items lining up under the left-most columns above them. Unfortunately, this also isn’t something that flexbox supports. With most settings for justify-content, my lonely last item is going in the centre of its row, whether I want it to or not. Even worse, if I add another item, the two on that final row will be correctly spaced according justify-content within their own row in isolation, but that isn’t necessarily going to align at all with the columns of items on the rows above.
These kinds of limitations do significantly reduce the usefulness of flexbox, IMHO. With CSS grids also now widely supported, I find there aren’t actually that many situations where flexbox is the best tool for the job.
Once flexbox understanding kicks-in, it becomes the most efficient way to create layouts by far.
I’m not sure I’d go quite that far. Flexbox is good for some types of layout, but it’s frustrating how often it gives you most of what you want but then there is no tidy way to get the final details right. For example, I was recently implementing a “small multiples” layout, showing many small charts of the same type, with the exact number depending on context. This seems like an ideal use case for flexbox: you can ma…
Append n dummy items to your list, where n is the maximum number of items you expect on a single line. They should have a height of 0, and the same width / margin as your regular items.
The "2D justification" where items occupy space intelligently would be awesome, but I doubt CSS will ever allow that.
Once flexbox understanding kicks-in, it becomes the most efficient way to create layouts by far.
Earlier quoted context omitted.
I’m not sure I’d go quite that far. Flexbox is good for some types of layout, but it’s frustrating how often it gives you most of what you want but then there is no tidy way to get the final details right. For example, I was recently implementing a “small multiples” layout, showing many small charts of the same type, with the exact number depending on context. This seems like an ideal use case for flexbox: you can ma…
For the 5+5+5+1 example, there is a fairly easy way to accomplish that: Append n dummy items to your list, where n is the maximum number of items you expect on a single line. They should have a height of 0, and the same width / margin as your regular items. The "2D justification" where items occupy space intelligently would be awesome, but I doubt CSS will ever allow that.