8 ms·

Coping with Flexbox

155 points by technicolor 7y ago

Royalaid 7y ago
I have been messing around with Flexbox quite a bit at work and this will be a super useful reference, thanks!
city41 7y ago
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 7y ago
  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 7y ago
    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 7y ago
      Reading your comment gave me the mnemonic “a line goes perpendicular to it” which I think will come in handy (for me at least).
  - jtolmar 7y ago
    Defining then relative to the flex direction makes sense, but the choice of which one is with the flow and which is across it is arbitrary, chosen between two words that normally mean with the flow. It'd make more sense if the properties were flex-justify and flex-justify-cross, or flex-align and flex-align-across.
ydnaclementine 7y ago
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
_bxg1 7y ago
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 7y ago
  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 7y ago
    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"
tomger 7y ago
This is a super helpful guide! Thanks!
whoisjuan 7y ago
Once flexbox understanding kicks-in, it becomes the most efficient way to create layouts by far.
- schpaencoder 7y ago
  In one dimension, yes, sometimes. But I find myself having better control with grids, even in a single dimension.
- Chris_Newton 7y ago
  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 7y ago
oliverx0 7y ago
Super useful! Thank you so much for this.
TomAnthony 7y ago
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.
pixelbreaker 7y ago
Can't wait for you to try CSS Grids
butz 7y ago
Firefox Inspector has useful visualizations for flexbox containers: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto... And another useful feature that shows indicators why some CSS properties are not working.
- sombremesa 7y ago
  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.
- technicolor 7y ago
  Indeed! I should’ve dropped some of these screenshots or links to FF devtools in the post.
afarrell 7y ago
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 7y ago
  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 7y ago
    > 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 7y ago
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
- darzu 7y ago
  Thank you, this is very helpful! I can never keep align-items vs justify-content vs align-content vs justify-items straight and this helps (although it's missing the last one, maybe that only applies to grids).
- alwillis 7y ago
  Whoa! Nice job. I wish this existed when I tried flexbox the first few times…
- technicolor 7y ago
  Wow, this is cool!
- chrysoprace 7y ago
  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 7y ago
    Thanks! I did not, but you might have a look at this cheatsheet: http://grid.malven.co/ http://grid.malven.co/
saintfiends 7y ago
Good concise article. Is there a tool to create such figures. They look really neat.
- technicolor 7y ago
  Thanks! As for the images, I drew them in Sketch.
sircastor 7y ago
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...
deleted 7y ago
[deleted]
ascorbic 7y ago
The explanations are good, but there's quite a gaping hole when you don't include any "flex-*" properties.
- technicolor 7y ago
  Hey, thanks! I intentionally left out all the other ones. This was a deliberate reductionist view of the feature.
chrisweekly 7y ago
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.

155 points by technicolor 7y ago

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

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 7y ago
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 7y ago
  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 7y ago
    Reading your comment gave me the mnemonic “a line goes perpendicular to it” which I think will come in handy (for me at least).
- jtolmar 7y ago
  Defining then relative to the flex direction makes sense, but the choice of which one is with the flow and which is across it is arbitrary, chosen between two words that normally mean with the flow. It'd make more sense if the properties were flex-justify and flex-justify-cross, or flex-align and flex-align-across.

ydnaclementine 7y ago

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

_bxg1 7y ago

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 7y ago
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 7y ago
  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"

tomger 7y ago

This is a super helpful guide! Thanks!

whoisjuan 7y ago

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

schpaencoder 7y ago
In one dimension, yes, sometimes. But I find myself having better control with grids, even in a single dimension.
Chris_Newton 7y ago
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 7y ago

oliverx0 7y ago

Super useful! Thank you so much for this.

TomAnthony 7y ago

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.

pixelbreaker 7y ago

Can't wait for you to try CSS Grids

butz 7y ago

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

sombremesa 7y ago
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.
technicolor 7y ago
Indeed! I should’ve dropped some of these screenshots or links to FF devtools in the post.

afarrell 7y ago

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 7y ago
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 7y ago
  > 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 7y ago

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

darzu 7y ago
Thank you, this is very helpful! I can never keep align-items vs justify-content vs align-content vs justify-items straight and this helps (although it's missing the last one, maybe that only applies to grids).
alwillis 7y ago
Whoa! Nice job. I wish this existed when I tried flexbox the first few times…
technicolor 7y ago
Wow, this is cool!
chrysoprace 7y ago
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 7y ago
  Thanks! I did not, but you might have a look at this cheatsheet: http://grid.malven.co/ http://grid.malven.co/

saintfiends 7y ago

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

technicolor 7y ago
Thanks! As for the images, I drew them in Sketch.

sircastor 7y ago

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

deleted 7y ago

[deleted]

ascorbic 7y ago

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

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

chrisweekly 7y ago

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.