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

51–60 of 72 posts

Re: Flexbox Froggy

#51

Post by nicoburns »

qingcharles wrote: post #44
nicoburns wrote: post #31

Earlier quoted context omitted.

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

CSS actually already accounts for that with it's "inline" and "block" axes. Where inline is the axis along which text flows first (horizontal by default for latin text - although this can be overiden with the writing-mode property), and block is the other axis. Flexbox's main axis controlled by flex-direction is an extra abstraction on top of that.

Re: Flexbox Froggy

#52

Post by brandall10 »

Huppie wrote: post #26
skilled wrote: post #5

Other interesting games for learning CSS, https://cssgridgarden.com/ (basically Froggy for Grid) https://cssbattle.dev/ (a platform for doing various challenges, huge community) https://flukeout.github.io/ (learn about CSS selectors) https://css-animations.io/ (practice CSS animations)

Not sure if it's still a fully free thing but I also remember having a go at https://flexboxzombies.com/ in the past.

It's still free!

Re: Flexbox Froggy

#53

Post by paulddraper »

Previous:

https://news.ycombinator.com/item?id=30251054 2022 (317 points, 31 comments)

https://news.ycombinator.com/item?id=22629903 2020 (27 points, 2 comments)

https://news.ycombinator.com/item?id=21796926 2019 (2 points, 0 comments)

https://news.ycombinator.com/item?id=18752031 2018 (3 points, 0 comments)

https://news.ycombinator.com/item?id=18731852 2018 (6 points, 1 comment)

https://news.ycombinator.com/item?id=15605783 2017 (4 points, 0 comments)

https://news.ycombinator.com/item?id=14349739 2017 (3 points, 0 comments)

https://news.ycombinator.com/item?id=10652909 2015 (315 points, 69 comments)

Re: Flexbox Froggy

#54

Post by PUSH_AX »

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…

In all my years I’ve never seen such a polarising technology as tailwind. It’s really weird the lengths people will go through to defend their method of outputting key/value pairs to move things around on a webpage.

Re: Flexbox Froggy

#55

Post by RheingoldRiver »

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.

The way to remember justify is that in flex-row, justify is along the horizontal axis. And, in word processors like msword, you can set the text to "justify" which gives you clean edges on each side. I don't know the history of the word `justify` in flexbox but I would imagine it came from here. So since you know how it works in flex-row, then you know it's primary axis in both.

For items vs content: You always have items no matter what. But you don't need to do anything to the entire content besides justify/align until you have multiple rows with flex-wrap. There's simply no effect that align-content could possibly have here. So items is for individual children, and content is for entire rows.

So tldr: Justify is like the "justify" option in word processors, and align is the opposite one; you always have items, but aligning the content won't change anything until you have 2 rows/cols.

Remember these 2 things and you probably won't forget which is which ever again.

(That said, I do often forget if flex starts out row or column, but that's relatively unimportant to know, because the way I get around this is by always adding the direction when I say "display:flex".)

Re: Flexbox Froggy

#56

Post by holoduke »

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.

I always use chrome inspector to define my css for an element. It has a nice flexbox editor. Just play around. Copy css and paste in your project.

Re: Flexbox Froggy

#58

Post by airstrike »

bajsejohannes wrote: post #4
cipherself wrote: post #3

This is great, I used this years ago when I was learning about flexbox. There's also https://codepip.com/games/grid-garden/ by the same author that uses the same approach for CSS Grids.

Games seem to be a great way to learn CSS. I'm guessing because it has very natural learning path were you can solve increasingly hard problems that all seem easy because of what you've already learned. I enjoyed this game to learn CSS selectors a while ago: https://flukeout.github.io/

One might even say these games have a cascading level of difficulty

Re: Flexbox Froggy

#59

Post by thaumasiotes »

qingcharles wrote: post #44
nicoburns wrote: post #31

Earlier quoted context omitted.

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

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

What's going on with the red text all the way on the left of the news items? It does not appear to be the same thing as the bichig...?

Re: Flexbox Froggy

#60

Post by thaumasiotes »

Huppie wrote: post #26
skilled wrote: post #5

Other interesting games for learning CSS, https://cssgridgarden.com/ (basically Froggy for Grid) https://cssbattle.dev/ (a platform for doing various challenges, huge community) https://flukeout.github.io/ (learn about CSS selectors) https://css-animations.io/ (practice CSS animations)

Not sure if it's still a fully free thing but I also remember having a go at https://flexboxzombies.com/ in the past.

Created an account and attempted to start in Firefox: got some kind of endless loading animation.

Opened an Edge window, attempted to sign in: had a long wait followed by an error message about a network failure.

Post reply on HN