I just saw this simple game which is an interesting way to learn about how to use flexbox.
It’s pretty straight forward and there are lots of hints to help you on the way. The only question you might struggle with is the last one (q24) which made me think a little.
Flexbox is great but its not intuitive so games like this make it fun while you learn something on the way.
That was fun! Took me a while - and I have to say some of the options are far from intuitive! Thanks for posting, Paul.
Yes, I find the way that horizontal and vertical axes are defined is confusing as they do much the same job but in the other axis.
However, flexbox is pretty powerful especially as you can see from the quiz that you can pretty much move stuff where you want within reason.
It’s a shame flexbox isn’t as widely supported. I see from caniuse.com that IE10 and 11 only provide partial support.
I enjoyed that; by the end, I was quite attached to those froggies.
But I got stuck on the last one, which seemed to require adding a rule to target just the yellow frogs, which it wouldn’t let me do. Am I missing something? Is it possible to complete the task just with rules targeting #pond? (I don’t want to know how to do it; only whether it should be possible to do targeting just #pond, so I can go back and try again.)
Yes, it is. I forget what rules I used but it was a lot of trial and error.
Thanks. I’ve already tried quite bit of trial and error; I’ll go back and try a bit more.
Edit: Yay! I finally realised what I was missing, and all those froggies are now on their lilypads.
(And I have a screenshot, in case anybody doubts me. )
I thought it was quite easy, until the last one, it had me stumped and I left it after a while.
Going back for another try, I finally got it.
Same here. But it’s very satisfying when the penny drops and the frogs all hop into place.
Okay, that was a lot of fun and a very creative way of learning about flexboxes.
You can more or less forget about IE10 (and it uses a different syntax anyway) as the usage on IE10 is about equivalent or less than IE6, Most IE10 users should have upgraded to IE11 by now and stats show little usage.
IE11 has good support for flexbox but is marred by a few bugs. IE edge doesn’t seem to have the bugs so I would assume that IE11 will get them fixed in an update sometime.
If you use one of the auto prefixers though you can still get good support and cover about 96% of browsers.
Well done 
The last one was quite tricky.
Thank you very much, @PaulOB, for posting the link to this flexbox learning game. 'Twas a barrel of fun .
I managed to finish all 24 exercises in one sitting… which says “it’s amazing how lucky the ignorant can be”. I’m still not completely clear about two of the exercises including the last one (so in truth, the penny is still suspended in the air until I learn the values for the properties); but practice and a bit more reading should help.
Thanks again.
Only if they get to it before full support for IE11 ends on 16 January 2016. After that IE11 will only be supported for security patches (and no other version of IE will be supported at all). The second last step in Microsoft abandoning Internet Explorer completely.
Mow that the new Microsoft Edge browser has been released they are trying to get rid of the need to support two different browsers as quickly as possible.
About time
I’ve only used ‘edge’ a little and seems pretty good though worryingly it has some old ie6 type bugs that can completely wreck the look of a layout (hopefully they will be fixed quickly though).
I’m still finding with flexbox that I have to keep re-learning the same thing as it doesn’t sink in straight away. It may be that because I don’t use it daily that I forget what I have learned. Most of the layouts I need can be done without flexbox and work all the way back to IE8 so its only rarely that I need to utilise flexbox in a clients layout.
Nice post Paul. thank you for that. I really enjoyed that. The last one was tricky indeed 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.