Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Coping with Flexbox

kgrz.io

Post reply on HN
Print view View original

31–40 of 57 posts

Re: Coping with Flexbox

#31

Post by mistersquid »

Chris_Newton wrote: post #16
whoisjuan wrote: post #8

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

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 ma…

> 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

Re: Coping with Flexbox

#33

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

Re: Coping with Flexbox

#35

Post by alwillis »

darekkay wrote: post #18

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

Whoa! Nice job.

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

Re: Coping with Flexbox

#36

Post by Chris_Newton »

mistersquid wrote: post #31
Chris_Newton wrote: post #16

Earlier quoted context omitted.

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 ma…

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

Re: Coping with Flexbox

#38

Post by Chris_Newton »

Chris_Newton wrote: post #22
ht85 wrote: post #17

Earlier quoted context omitted.

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.

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 fina…

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

Re: Coping with Flexbox

#40

Post by technicolor »

darekkay wrote: post #18

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

Wow, this is cool!
Post reply on HN