Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game

Hey, author here.<p>I&#x27;ve always been a big fan of tower defense games so I thought it would be cool to make an open-source version of the game for teaching basic Flexbox properties. It&#x27;s also a project that&#x27;s helped me learn Ember.js.<p>The code is on GitHub: <a href="https:&#x2F;&#x2F;github.com&#x2F;channingallen&#x2F;tower-defense" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;channingallen&#x2F;tower-defense</a>

Very cool! Would love to be able to stop mid wave and tweak a mistake instead of waiting for the whole thing to finish&#x2F;refresh. Sucks having to retype my rules all over again too.

Definitely helpful to understanding flexbox. It took me a while to notice the help &#x27;?&#x27; icon to bring the tooltip back up.

On Wave 3, &quot;justify-content: space-between&quot; appears to position incorrectly on Firefox 44 on OS X: <a href="http:&#x2F;&#x2F;i.imgur.com&#x2F;nx6hROH.png" rel="nofollow">http:&#x2F;&#x2F;i.imgur.com&#x2F;nx6hROH.png</a><p>On Chrome, it positions the turrets on the edges as expected.<p>EDIT: Looks like evunveot noticed the same in Linux and linked to the Firefox bug.

Awesome tutorial!<p>I feel like flexbox could have been so much simpler.. I mean, there&#x27;s a reason why there are so many &quot;Learn flexbox tutorial&quot; out there. Like, &quot;justify-content: flex-end&quot; won&#x27;t win any API award.

Cool game, but switching tabs breaks the game, you lose all points you didn&#x27;t yet earn.

Another fun &#x27;learn flexbox&#x27; games is Flexbox Froggy<p><a href="http:&#x2F;&#x2F;flexboxfroggy.com" rel="nofollow">http:&#x2F;&#x2F;flexboxfroggy.com</a>

This is awesome. I&#x27;d love to be able to move the towers around during the waves for some more challenging levels.

Sometimes, the box where you input the CSS rules will shake when you click on the hint box. Not sure if this is supposed to happen or not, but it was unexpected from me.<p>Otherwise, I thought this was pretty neat and very informative. Good job and thanks for sharing!

Really fun, I enjoyed playing all the waves... Would definitely be cool to have more challenge levels with maybe css transitions to move the tower while the wave is happening :-)

This is fantastic as I&#x27;ve just started learning flex-boxes, I did have one problem using it, there&#x27;s no stop button once the circles start flowing!

This is cool, I&#x27;m looking forwarding to the next waves to be released, as I would love to try other properties like flex-grow and flex-shrink.

This is fantastic! I would love to be able to bring back the helpful modal at the beginning of each turn, as a refresher on the options.

It&#x27;s a fun way to learn flexbox. You should think to add an autocomplete helper when typing the flexbox properties.

This is great. I have been meaning to learn the CSS flex box model and thanks to this game it took only a few minutes!

Pretty cool. Buggy when changing tabs and I wish there were a speedup button (I don&#x27;t like tower defence games).

Great tutorial !

This is great!!