Coping with Flexbox

https://kgrz.io/coping-with-flexbox.html

by technicolor • 7 years ago

155 55 7 years ago

Royalaid• 7 years ago

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

city413• 7 years 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• 7 years 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.

city413• 7 years 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.

jtolmar• 7 years 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• 7 years ago

For figuring which flexbox options I want, I always use this: https://cvan.io/flexboxin5/ bit of a flexbox editor/explorer

_bxg12• 7 years ago

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

akira2501• 7 years 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.

_bxg12• 7 years ago

Yep. Nearly every flex child for me is either

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

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

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

tomger• 7 years ago

This is a super helpful guide! Thanks!

whoisjuan• 7 years ago

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

schpaencoder• 7 years ago

In one dimension, yes, sometimes. But I find myself having better control with grids, even in a single dimension.

Chris_Newton7• 7 years 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• 7 years ago

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.

somebodynew• 7 years ago

I run into this problem constantly, but I've never come to a universal solution that could be standardized for general use as a new flexbox CSS property. It would be nice to be able to indicate that rows should have the same number of items (except the last row), the last row should be as full as possible even if it means using a different size for the other rows, and the items on the last row should be aligned as if the row was filled after them.

mistersquid5• 7 years ago

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.

My understanding of this description may be incorrect. If not, this is supported in flexbox.

This pen is editable so the HTML list can contain 16 items (5+5+5+1) and I think it works for what you're describing. [0] [1]

[0] https://www.w3schools.com/css/tryit.asp?filename=trycss3_fle...

[1] https://imgur.com/a/Cr8WAmY

chris_st• 7 years ago

Flexbox was a major game-changer for how I get layouts done. SO glad it exists! Can't wait until our customer transitions off of IE so I can learn Flexgrid (yes, IE has Flexgrid, but it's a different syntax and semantics, alas... MS jumped early, and then didn't track the standard, IIUIC).

philliphaydon• 7 years ago

Css grids > flex box.

I don’t ever want to touch flexbox again after learning css grid

detaro• 7 years ago

But they're good at different things?

oliverx0• 7 years ago

Super useful! Thank you so much for this.

TomAnthony• 7 years ago

Another guide that I found added clarity around 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• 7 years ago

Can't wait for you to try CSS Grids

butz• 7 years ago

Firefox Inspector has useful visualizations for flexbox containers: 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• 7 years 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.

technicolor4• 7 years ago

Indeed! I should’ve dropped some of these screenshots or links to FF devtools in the post.

afarrell3• 7 years 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/ 10 times.

Dylan16807• 7 years 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.

afarrell3• 7 years 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.

loosetypes• 7 years ago

Big fan of flexbogfroggy (and cssgridgarden)!

I've been trying to improve my css lately and have found Kevin Powell's content on YouTube great[0].

Eventually I caved and purchased his course[1]. It was initially just to support him, as he has so much premium, free content out there that had benefitted me, but I'm actually going through it and (at least for me) learning faster than by just passively watching youtube videos.

I'm finding it pretty well structured and a good progression from flexbogfroggy.

[0] https://www.youtube.com/user/KepowOb [1] https://www.kevinpowell.co/courses/

JamesSwift• 7 years ago

Thats a false equivalence though.

Tools in development are written _by_ people _for_ people. They are crafted to be the way they are, and once you hit a certain level of abstraction above the performance layers I think its assumed that the tool should be easy to use.

afarrell3• 7 years ago

yes, tools 'should' be easy to use.

When you're designing tools, this is relevant.

When you're using tools that have been agreed-upon by committee, it is not.

darekkay2• 7 years 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

darzu• 7 years 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• 7 years ago

Whoa! Nice job.

I wish this existed when I tried flexbox the first few times…

technicolor4• 7 years ago

Wow, this is cool!

chrysoprace• 7 years 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?

darekkay2• 7 years ago

Thanks! I did not, but you might have a look at this cheatsheet: http://grid.malven.co/

saintfiends• 7 years ago

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

technicolor4• 7 years ago

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

sircastor• 7 years 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...

ascorbic• 7 years ago

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

technicolor4• 7 years ago

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

chrisweekly• 7 years 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

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

Coping with Flexbox

Related Stories