Live data from Hacker News

Flexbox Froggy

flexboxfroggy.com

71–72 of 72 posts

Re: Flexbox Froggy

#71

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

You mean you have problem with start/end vs left/right? That's not confusing to me and helpful to use start/end for RTL layouts as well as LTR.

Re: Flexbox Froggy

#72
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)

I found flexbox froggy lacking of some extra details and was able to fill the gap here,

https://css-tricks.com/understanding-flex-grow-flex-shrink-a... (describes flex-grow, flex-shrink, flex-basis)

Post reply on HN