
Coping with Flexbox - technicolor
https://kgrz.io/coping-with-flexbox.html
======
afarrell
When you feel a lack of confidence or speed with of a tool you use frequently,
it is easy to feel a mixture of frustration and shame.

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/](https://flexboxfroggy.com/) 10
times.

~~~
Dylan16807
There are lots of things people can do after being shown once. They'll go a at
a measured pace, but need minor or zero help. Sports and marital art practice
are all about getting sub-second decisions and extremely quick/smooth
movements; none of that's relevant to writing something without feeling like a
fool.

 _Maybe_ a tool like this necessarily needs a bunch of practice. Or maybe it's
badly designed, and the experience should be more like chopping a carrot.

~~~
afarrell
> Sports and marital art practice are all about getting sub-second decisions
> and extremely quick/smooth movements; none of that's relevant to writing
> something without feeling like a fool.

Some people expect their brain to answer a question like "I want to make this
particular box's children evenly vertically-spaced. What is the name of the
css property to google?" with a confident sub-second response. Some people,
upon observing that they can't, feel like a fool.

For those people, it _is_ relevant.

\--------

> Maybe a tool like this necessarily needs a bunch of practice. Or maybe it's
> badly designed, and the experience should be more like chopping a carrot.

I'd like to live in a world where every tool thats the best for a job is well-
designed.

I'd also like to live in a world every message I try to communicate is one
that people pay attention to and understand in the spirit I intended, even if
I never edit it.

I'd also like to live in a world where my lumbar region is pain-free, even if
I don't regularly do squats.

\---------

The author's words about his pain points are still valuable. Systems should be
improved. They can't be improved unless problems are made clear. There is much
broken in the world and many of us have taken up the call to fix it and we
should heed the words of others' frustration.

But there is much broken in the world that won't get fixed anytime soon.

------
darekkay
When I was learning Flexbox, I've created a graphical cheatsheet [1] (based on
another one) that I've printed out and put next to my computer. It helped me a
lot back then.

[1] [https://darekkay.com/dev/flexbox-
cheatsheet.html](https://darekkay.com/dev/flexbox-cheatsheet.html)

~~~
chrysoprace
That's the most succinct quick reference I've found on this (I've always had
trouble digesting the css-tricks article). Have you thought about making a
similar cheatsheet for Grid?

~~~
darekkay
Thanks! I did not, but you might have a look at this cheatsheet:
[http://grid.malven.co/](http://grid.malven.co/)

------
butz
Firefox Inspector has useful visualizations for flexbox containers:
[https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspecto...](https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts) And another
useful feature that shows indicators why some CSS properties are not working.

~~~
sombremesa
Thanks, I use Firefox and didn't know about this. It's interesting, but seems
like it'd be most useful if you were actually using flex basis and not that
helpful for just basic justification and alignment.

------
whoisjuan
Once flexbox understanding kicks-in, it becomes the most efficient way to
create layouts by far.

~~~
Chris_Newton
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 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.

~~~
ht85
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.

~~~
Chris_Newton
Sure, there are various workarounds for the left justification problem, but
none of the ones I know is attractive. Anything based on adding extra items
defeats one of the main advantages of flexbox, which is that you don’t need to
know in advance how many items per line will fit and if the user resizes their
browser then the layout will automatically adapt. Anything based on using
:after to fill the space on the final line only works if you’re left-aligning
everything with no space outside.

I think what is really needed here is an extra property specifying how to
handle the last row (or column for vertical flex) of the layout that is
separate to the normal justify-content property but takes the positions of
items in the preceding rows (columns) into account, roughly analogous to the
subgrid concept for CSS grids.

I don’t think the “2D justification” problem would be that difficult to solve
either. Again, it just needs a single extra property, in this case to specify
whether and how to balance item counts across all rows (or columns, depending
on flex direction). A simple approach would just repeatedly shorten all of the
preceding rows by one item and add the same total number of items to the final
row until doing so again would make the last row longer than the rest. Then
redistribute the horizontal space throughout according to the normal
justification, which at least minimises the difference between the number of
items in the final row and the rest without needing any extra space for the
overall layout.

A slightly more sophisticated treatment might offer a third option that can
shorten more than just the final row, distributing any difference in item
counts over multiple rows instead. For example, 5+5+5+2 would become 5+4+4+4.
In this way, you would at worst have a set of earlier rows and a set of later
rows where the item counts differed by no more than 1. Presumably you would
also then apply the final row justification property imagined above to all
rows in the later set, if you don’t have the same number of items in all rows.

Maybe in the future we’ll see a Flexbox Level 2 spec that addresses issues
like these, just as subgrid is coming with level 2 of the grid layout spec.

~~~
Chris_Newton
I lost a paragraph above. There was supposed to be a final version of the
balancing behaviour that considered not just item counts but space used and
flex behaviour for each item, adjusting breaks over the whole flex container
in a similar way to Knuth-Plass justification of a text paragraph. There was
also an observation that this made the layout algorithm much more complicated
and might be going too far down the rabbit hole. :-)

------
_bxg1
CSS-Tricks also has a more practical guide which has been essential for me:
[https://css-tricks.com/flex-grow-is-weird/](https://css-tricks.com/flex-grow-
is-weird/)

~~~
akira2501
Once I started thinking about flexbox the way I thought about QT GUI's it all
started to click for me. Especially flex-grow being basically equivalent to
BoxLayout's "stretch" I was able to easily make responsive "GUI-like" programs
very quickly.

I don't even bother with justify-content anymore, elements with flex-grow
combined with min-width and max-width pretty much cover all my required
"layout" use cases.

~~~
_bxg1
Yep. Nearly every flex child for me is either

    
    
      flex-grow:0;
      flex-shrink:0;
    

or

    
    
      flex-grow:1;
      flex-shrink:1;
    

And the latter on an empty div makes a really nice "spacer"

------
chrisweekly
Getting CSS layout right can be extraordinarily difficult, borderline
impossible, absent the right understanding and set of composable primitives.

As someone who's done web development since the late 1990's, I offer my very
highest praise and unreserved recommendation for an extraordinarily thorough,
coherent and practical resource I only recently discovered: [https://every-
layout.dev](https://every-layout.dev)

Its "Axiomatic CSS" is, finally, a standards-based solution that provides a
solid foundation for truly responsive layout and design.

------
city41
Nice guide, thanks for writing it. I can never remember which directions
align/justify impact. The best mnemonic I could think of was justified text.
When you click the justify button on a text paragraph in a typical word
processor, it impacts the text in the same direction as justify-content in
flexbox does.

~~~
frosted-flakes
You just have to remember that if the flex-direction is column, align/justify
also flip. Which is partly why it's so confusing.

~~~
city41
They are the same in relation to the flex-direction. Justify goes with the
direction, align goes perpendicular to it. But still I agree, I've now been
using flexbox for a long time and I still find myself second guessing a lot.

~~~
codyb
Reading your comment gave me the mnemonic “a line goes perpendicular to it”
which I think will come in handy (for me at least).

------
TomAnthony
Another guide that I found added clarity around flexbox:

[https://internetingishard.com/html-and-
css/flexbox/](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.

------
ydnaclementine
For figuring which flexbox options I want, I always use this:
[https://cvan.io/flexboxin5/](https://cvan.io/flexboxin5/) bit of a flexbox
editor/explorer

------
pixelbreaker
Can't wait for you to try CSS Grids

------
sircastor
I sympathize with this. Everytime I want to use flexbox, I end up searching
and reading and rereading CSStricks' guide. And then experimenting until I get
what I am after. One of these days I'll stick...

------
ascorbic
The explanations are good, but there's quite a gaping hole when you don't
include any "flex-*" properties.

~~~
technicolor
Hey, thanks! I intentionally left out all the other ones. This was a
deliberate reductionist view of the feature.

------
Royalaid
I have been messing around with Flexbox quite a bit at work and this will be a
super useful reference, thanks!

------
saintfiends
Good concise article. Is there a tool to create such figures. They look really
neat.

~~~
technicolor
Thanks! As for the images, I drew them in Sketch.

------
oliverx0
Super useful! Thank you so much for this.

------
tomger
This is a super helpful guide! Thanks!

