Flexbox Froggy: A game for learning CSS flexbox

Love it!<p>Reminds me of CSS Diner - <a href="https:&#x2F;&#x2F;flukeout.github.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;flukeout.github.io&#x2F;</a>

The possible values for justify-content are only displayed on Levels 1 and 2. By Level 3 you&#x27;re supposed to have all 5 values memorized even though you&#x27;ve only used 2 of them? I had to keep flipping back to Level 2 just to get a list of the possible values. For a game built for someone who has never used flex before, I think you&#x27;re assuming too much familiarity with it.

It&#x27;s a pretty neat way to visualize what the properties do. Learning how Flexbox works visually, as opposed to referring to a certain popular (and excellent) guide 10 times a day, is a pretty nice technique.

Thoroughly enjoyed it. I think I just need to run through it about a dozen more times to keep the difference between align-content, justify-content, and align-items separate in my head. So many words, so close in meaning.

The final solution was pretty fun.<p>Here is a gist if you can&#x27;t get it :-)<p><a href="https:&#x2F;&#x2F;gist.github.com&#x2F;aphillipo&#x2F;59ab3b54419c97d96687" rel="nofollow">https:&#x2F;&#x2F;gist.github.com&#x2F;aphillipo&#x2F;59ab3b54419c97d96687</a>

Cool js app[0]! I often have to look up flexbox properties. After level 4 of this game, align and justify are definitely more clear in my mind now. It also helps to see over and over in each level that these properties are for the flex parent.<p>Edit: later levels (~10) begin to help with the discerning the difference between the flexbox main and cross axes.<p>[0] <a href="https:&#x2F;&#x2F;github.com&#x2F;thomaspark&#x2F;flexboxfroggy&#x2F;" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;thomaspark&#x2F;flexboxfroggy&#x2F;</a>

The flex command suite seems rather arbitary chosen and named. Doesn&#x27;t seem to reflect a decade of experience learning from the pain of CSS.

Oh man, best game ever. I really wanted to learn it having putting it off for so long. I can see how I could use it in a framework of mine. Gives me an excuse to use open web technologies again.<p>I was revamping some old code of mine, removing outdated technologies of third parties like YUI... But I noticed that I needed them for layout. But flexbox can provide an alternative for me.<p>Thanks a bunch!

Since the game doesn&#x27;t show you the effect of &quot;wrong&quot; answers, you&#x27;re left haphazardly guessing answers until one is correct, instead of incrementally learning by exploring.<p>Game designers, take note: design open-world games that let the player explore the controls, instead of simply refusing all unwanted actions.

Damn, this is a great learning tool for teaching people flexbox

This is great, but I wish it was longer. The first 23 levels are pretty easy and it tells you what properties to use, then it drops you into a really difficult level with no hints. It would be nice if it built up to that with some medium difficulty levels.

This was incredibly educational for me. My only feedback&#x2F;request would be to reinforce the difference between `align-content` and `align-items`. I still don&#x27;t quite get when to use which.

I&#x27;ve been telling myself to learn flexbox for a while now. Went to check this game out, got hooked, and learned it in about 10 minutes. Tooooo good, thanks webman!

Avoided using flexbox up to now and overall it seems pretty great for some layout tasks.<p>I do wonder about the point of the `order` property, would anyone ever want to mess with this? It seems like something that should absolutely be in your application code, either client-side javascript or server-side. Using it seems like it would make a project harder to maintain and understand.

So &quot;display: flex&quot; affects how items within an element are positioned, while e.g. &quot;display: inline-block&quot; affects how an element itself is positioned. It seems to me that this is in conflict. Am I overlooking something? Or are the creators of CSS still not able to figure these kinds of problem out?

This is one of the best tutorials I&#x27;ve ever seen. Great idea, great execution.

Anyone else have to use align-content instead of the &quot;taught&quot; align-items for 24?

This is an amazing follow up to the greatly missed FlexBoxIn5. Kudos to the creator!

Being picky here but when the first paragraph says &quot;Guide this frog to the lilypad on the right&quot; it should probably specify that you are moving all content in the pond. Just seems that it should start with moving the frog as a selector or reword that to be a bit more clear.

Awesome. Clears lot of properties from flexbox display. Thanks a ton.

This is the best way ever to learn!! You sir deserve a cookie...

Wow, I think I finally get flexbox now.

excellent game. thoroughly enjoyed it

So, flex looks to be a better way to create&#x2F;handle responsive design; rely less on bootstrap and stuff?<p>On a similar note Im curious if there is a responsive typography framework that&#x27;s out there and people are using? A framework where the text automatically shrinks down without having to change the font-size in various media queries?

I think that this is great and I just want to make a suggestion. I see a lot of these &quot;learn to code&#x2F;css&quot; run into the same problem where they don&#x27;t feel like real games. Give the player a dilemma such as dying if they don&#x27;t type the right command fast enough. Resetting the level if they fail.<p>edit: lvl 15 makes colorblind kids sad :(<p>edit2: almost, almost <a href="http:&#x2F;&#x2F;i.imgur.com&#x2F;egndPZ8.png" rel="nofollow">http:&#x2F;&#x2F;i.imgur.com&#x2F;egndPZ8.png</a><p>edit3: champion!

Just another comment to say the same thing as the others: great idea and really well done. Congratulations!