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

Flexbox Froggy

flexboxfroggy.com

Post reply on HN
Print view View original

11–20 of 72 posts

Re: Flexbox Froggy

#12

Post by doytch »

victor106 wrote: post #8

Question from a CSS noob, When would you use Flexbox vs Grid?

My personal heuristic:

- Start with Flexbox. Flexboxes of flexboxes will solve almost everything that’s common, and be easier to reason through and maintain imo.

- If you’re doing something that appears tabular, use Grid. Flexbox will appear as though it’ll get you there, but the moment you start having cell contents that are highly variable in size your columns will start to get out of sync.

- The above is esp the case if you’re trying to do repeating sets of rows. Eg Row type A, row type B, A, B, etc. That’s a Grid problem.

But of course, the only way to get good mental models is by trying both approaches and seeing what the drawbacks are. Maybe try the Grid games that folks have linked in other comments?

Re: Flexbox Froggy

#13

Post by sirius87 »

This is very useful. I always end up Googling vertical align for flexbox.

In a rush, what would help me refresh flexbox knowledge is being able to drag and drop the frog, snapped to a 3x3 grid, and get the flexbox CSS code as output.

Still a very thoughtful tutorial.

(EDIT: The reason I said the above is I've personally given up on keeping up with new CSS stuff. Having written CSS off and on since IE7 days, basically I have no energy to keep css tricks in memory, having lived through hand coding vendor prefix flags and whatever the new Chrome Canary is thrusting down the pipe)

Re: Flexbox Froggy

#14

Post by dsego »

sirius87 wrote: post #13

This is very useful. I always end up Googling vertical align for flexbox. In a rush, what would help me refresh flexbox knowledge is being able to drag and drop the frog, snapped to a 3x3 grid, and get the flexbox CSS code as output. Still a very thoughtful tutorial. (EDIT: The reason I said the above is I've personally given up on keeping up with new CSS stuff. Having written CSS off and on since IE7 days, basically…

No tricks anymore, not much to keep up, flexbox and grid are the end-game. And for most UI cases flexbox is all you need, it's basically stack/group (or vbox/hbox), so you can arrange items vertically or horizontally. Learn flexbox, it's the most useful thing for layouts that's come to css, and it's really simple, there are options for spacing (gap), justify and align, that's pretty much 99% of cases right there.

Re: Flexbox Froggy

#16

Post by dsego »

victor106 wrote: post #8

Question from a CSS noob, When would you use Flexbox vs Grid?

Flexbox for most stuff, resort to grid only if flexbox can't solve your layout. The way I see it, if there is horizontal or vertical stacking, it's flexbox. And since you can nest, it covers a wide ranged of typical layout patterns (boxes within boxes). One caveat, since flexbox only arranges vertically or horizontally, you have to insert container flex elements, which means it affects the markup, so you are a bit constrained if you want to make it really responsive and rearrange everything based on viewport size. Grid is more complex, and useful for fixed layouts when things have to align more. With sub-grid support it will be even more powerful.

Re: Flexbox Froggy

#18

Post by Waterluvian »

Doesn’t matter how many years I work with CSS, I will always confuse flex things like align-content and align-items, like inserting a USB cable wrongly, every single time. Oh and align vs justify.

CSS grid is incredible too. I can’t believe how spoiled we are now with amazing layout options.

Re: Flexbox Froggy

#19

Post by CraigJPerry »

It’s fashionable to crap on tailwind in some css circles but nothing else has improved my CSS knowledge so quickly - it’s specifically when used with the tailwind plugin in vscode, it shows the underlying css in popups and it’s addictive to guess what the underlying css will be for a given utility class and then quickly check.

That said, flexbox froggy and the other grid garden game were fun. Also find myself regularly going for the css tricks reference page for both of these.

Post reply on HN