Good concise article. Is there a tool to create such figures. They look really neat.
Thanks! As for the images, I drew them in Sketch.
Coping with Flexbox
41–50 of 57 posts
Re: Coping with Flexbox
#42Once flexbox understanding kicks-in, it becomes the most efficient way to create layouts by far.
Css grids > flex box.
I don’t ever want to touch flexbox again after learning css grid
Re: Coping with Flexbox
#43Firefox 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.
Indeed! I should’ve dropped some of these screenshots or links to FF devtools in the post.
Re: Coping with Flexbox
#44Getting 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.
Re: Coping with Flexbox
#45When 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 artis…
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.
Re: Coping with Flexbox
#46Re: Coping with Flexbox
#47CSS-Tricks also has a more practical guide which has been essential for me: https://css-tricks.com/flex-grow-is-weird/
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.
Yep. Nearly every flex child for me is either
flex-grow:0;
flex-shrink:0;
flex-grow:1;
flex-shrink:1;
Re: Coping with Flexbox
#48Earlier quoted context omitted.
> 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…
You’re not really doing any flexing in that example, though, so I’m not sure why you would need flexbox at all there. If you start using the justification options then unfortunately things get more difficult.
> You’re not really doing any flexing in that example, though, so I’m not sure why you would need flexbox at all there.
The items are governed by flexbox and adding, for example
> align-items: flex-end;
My point is that flex readily handles the use case you describe. Elsewhere in this subthread (5+4+4+4 distribution), you also deem flexbox incapable but I can think of how a frontend developer could make it work.
Perhaps you are unintentionally looking for instances where flexbox cannot do something and then imposing constraints where flexbox is not an appropriate tool. However, if you think in terms of flexbox, some of these scenarios actually have handy and elegant solutions.
YMMV
Re: Coping with Flexbox
#49Earlier quoted context omitted.
You’re not really doing any flexing in that example, though, so I’m not sure why you would need flexbox at all there. If you start using the justification options then unfortunately things get more difficult.
> You’re not really doing any flexing in that example, though, so I’m not sure why you would need flexbox at all there. The items are governed by flexbox and adding, for example > align-items: flex-end; to the container would readily demonstrate this. (Think class added on some user interaction.) The old way of doing this would be using float. My point is that flex readily handles the use case you describe. Elsewhere…
The items are governed by flexbox
Yes, but since you aren’t using any of the flex-related properties other than flex itself and wrapping, the layout you’re building isn’t substantially different from normal block-based layout and wrapping.
My point is that flex readily handles the use case you describe.
If we took your example and added some flex-specific behaviour, say justify-content:space-around, how could we readily left-align the final items with flexbox here?
Elsewhere in this subthread (5+4+4+4 distribution), you also deem flexbox incapable but I can think of how a frontend developer could make it work.
It’s difficult to discuss that when haven’t shown us what you have in mind. Would you like to elaborate?
Perhaps you are unintentionally looking for instances where flexbox cannot do something and then imposing constraints where flexbox is not an appropriate tool.
I would prefer to say that flexbox would be a more useful tool if it could also handle these finer details. There are numerous blog posts and SO questions about limitations in the current version of flexbox and how to work around them, so I think it’s fair to say that the challenges I’ve described here are not unusual.
Re: Coping with Flexbox
#50When 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 artis…
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.
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.