51–57 of 57 posts
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
Earlier 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. 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 read…
I'm trying to think of an example where one would "justify-content:space-around" and want the last line to align left. Curious.
I agree flexbox has limitations but I don't see them in the examples you've provided thus far.
This is not much of an elaboration but the 5+4+4+4 I'm thinking along the lines of changing margin of nth children, or even specifically adjusting the CSS for the fifth child.
When developing front-end, I'm sure you would use the most appropriate tool for the design at hand. Flexbox even with its limitations is sometimes the best choice. I also agree it could use use refinements, but whatever refinements it needs aren't apparent to me in the examples you've described.
This may be a failure of my imagination.
Earlier quoted context omitted.
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 read…
> 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? I'm trying to think of an example where one would "justify-content:space-around" and want the last line to align left. Curious. I agree flexbox has limitations but I don't see them in the examples you've provided thus far. This is not much of an elabora…
My original example would suffice. Given a large number of small charts to be displayed, typically all of the same size, it seems quite reasonable to want them to be evenly distributed and to adapt automatically to use the available horizontal space, but for an incomplete final line to fill from the left under the items in rows above. (Please remember that this is what was meant by aligning to the left in this context; we’re not talking about literally aligning on the left margin without reference to the extra space added by flexbox here.) The alternatives available with the current flexbox behaviour tend to be things like putting a single chart in the centre or putting two charts on the far left and far right with a possibly huge space between them, which inevitably leave the items in the last line looking arbitrarily placed and disconnected from the rows above.
This is not much of an elaboration but the 5+4+4+4 I'm thinking along the lines of changing margin of nth children, or even specifically adjusting the CSS for the fifth child.
But how do you know in advance which n you need? The primary advantage of flexbox in this sort of situation is that your many items will use up the available display width while also being neatly spaced. If you know your exact horizontal sizes in advance, you don’t really need flexbox at all for this kind of layout, since again you can just choose suitable margins and/or padding on your items and then rely on simpler layout tools like inline blocks.
Earlier quoted context omitted.
> 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? I'm trying to think of an example where one would "justify-content:space-around" and want the last line to align left. Curious. I agree flexbox has limitations but I don't see them in the examples you've provided thus far. This is not much of an elabora…
I'm trying to think of an example where one would "justify-content:space-around" and want the last line to align left. Curious. My original example would suffice. Given a large number of small charts to be displayed, typically all of the same size, it seems quite reasonable to want them to be evenly distributed and to adapt automatically to use the available horizontal space, but for an incomplete final line to fill…
Something like n rows have m items and the total number of items is (n * m) + 1. And you want the first (m+1)th item to be in row 1.
Yes, you’d be wasting your time with flexbox. You’d also be wasting your time complaining flexbox doesn’t support this.
To be clear, I don’t see a spec in any of the exceptions you’re carving, and you’re not providing one, just saying “flexbox can’t do this”.
You’re right. it can’t.
Earlier quoted context omitted.
I'm trying to think of an example where one would "justify-content:space-around" and want the last line to align left. Curious. My original example would suffice. Given a large number of small charts to be displayed, typically all of the same size, it seems quite reasonable to want them to be evenly distributed and to adapt automatically to use the available horizontal space, but for an incomplete final line to fill…
Never mind flexbox, what generalized rule would yield 5+4+4+4 instead of 5+5+5+2? Something like n rows have m items and the total number of items is (n * m) + 1. And you want the first (m+1)th item to be in row 1. Yes, you’d be wasting your time with flexbox. You’d also be wasting your time complaining flexbox doesn’t support this. To be clear, I don’t see a spec in any of the exceptions you’re carving, and you’re n…
I’m not sure whether you’ve read my comments elsewhere in this discussion, but the short version is that this is about balancing the number of items in each row while not requiring any extra space compared to the naïve layout. Formally, the goal might be to minimise the maximum pairwise difference between the number of items in the rows, subject to not using more rows than the existing flexbox behaviour and keeping any longer rows earlier in the order. My earlier example assumed all items had the same size, but this isn’t a requirement for flex items and the balancing concept could be generalised by taking into account item sizes and flex settings instead of just looking at the counts.
Good typesetting can vary spacing and possibly hyphenation to give a balanced look to a paragraph, and somewhat complicated algorithms exist to do this well. It doesn’t seem an exotic requirement to have similar attention to detail in laying out flexed content in 2D, and it would certainly allow results that look better than what often happens today.
Earlier quoted context omitted.
Never mind flexbox, what generalized rule would yield 5+4+4+4 instead of 5+5+5+2? Something like n rows have m items and the total number of items is (n * m) + 1. And you want the first (m+1)th item to be in row 1. Yes, you’d be wasting your time with flexbox. You’d also be wasting your time complaining flexbox doesn’t support this. To be clear, I don’t see a spec in any of the exceptions you’re carving, and you’re n…
Never mind flexbox, what generalized rule would yield 5+4+4+4 instead of 5+5+5+2? I’m not sure whether you’ve read my comments elsewhere in this discussion, but the short version is that this is about balancing the number of items in each row while not requiring any extra space compared to the naïve layout. Formally, the goal might be to minimise the maximum pairwise difference between the number of items in the rows…
I've not looked at your comments elsewhere in this discussion, but this makes sense as a specification.
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
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?