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

41–50 of 72 posts

Re: Flexbox Froggy

#41

Post by tuukkah »

moron4hire wrote: post #38
tuukkah wrote: post #6

Guess CSS also has a section about Flexbox, but it focuses more on reading than writing CSS: https://www.guess-css.app/

Well, I clearly understand nothing about CSS position. I could consistently answer all the other questions, but position I consistently failed.

I think you need to learn by heart what each of the 5 position values means. After that, the tricky part is understanding what the width/height/top/bottom/left/right values are relative to i.e. the containing block and how that works: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_...

Re: Flexbox Froggy

#42

Post by [deleted] »

CraigJPerry wrote: post #19

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

[deleted]

Re: Flexbox Froggy

#43

Post by phforms »

CraigJPerry wrote: post #19

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

I actually frequently use the Tailwind docs (https://tailwindcss.com/docs/) to lookup CSS property names and what they do, especially with flexbox and grid, since I mostly learned them through Tailwind. It’s just a nicely organized quick reference with lots of examples.

Not using Tailwind as much these days (more inclined to CSS-in-JS solutions like Stitches, which unfortunately has been abandoned by the developers), but for prototyping it’s still amazing.

Re: Flexbox Froggy

#44

Post by qingcharles »

nicoburns wrote: post #31
Waterluvian wrote: post #18

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.

Indeed. The rule for anyone wondering is: - "justify-" is for the primary axis. - "align-" for the secondary one - "-content" is for grid tracks / rows in flex-wrap containers. - "-items is for individual children (within the row / grid cell) I would also definitely prefer clearer names.

It's so tempting to want to label them horizontal and vertical etc, but I have to work with Arabic which is all reversed, and then I'm setting up a test localization in Traditional Mongolian, and you realize why these things are named the way they are:

http://khumuunbichig.montsame.mn/index.php?home

Re: Flexbox Froggy

#45

Post by qingcharles »

dsego wrote: post #14
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.

I need the 1%. I want browser masonry support. Right now only Safari has it baked in properly, the rest I have to code around in a sub-optimal way:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...

I think Safari has it because the guy that wrote the spec now works at Apple. Not 100% sure of that, but seems that way.

The code is in Chromium, just nobody ever hit the GO button.

Re: Flexbox Froggy

#47

Post by marcosdumay »

victor106 wrote: post #8

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

Flexbox aligns things while grid mostly allocates specific space for them.

So, if I need alignment, I go with flexbox. If I have all the elements sketched-up in a design, I go with grid.

Re: Flexbox Froggy

#49

Post by farigiss »

Zufriedenheit wrote: post #48

Wonder how to finish the last level. Need to target the yellow frogs as items but in the editor there is only a selector for the pond?

flex-direction: column-reverse;

flex-wrap: wrap-reverse;

justify-content: center;

align-content: space-between;

The yellow froggies end up separated by wrapping. Then it's just a matter of aligning them. The align-self and order attributes mentioned seem to be red herrings.

Re: Flexbox Froggy

#50

Post by jasmataz »

Zufriedenheit wrote: post #48

Wonder how to finish the last level. Need to target the yellow frogs as items but in the editor there is only a selector for the pond?

I felt the same way at first because I didn't know about wrap-reverse, but you can do it all using only the #pond selector
Post reply on HN