Hacker News Reader

Comment by ChanningAllen | Hacker News Reader

Hey, author here.

I'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's also a project that's helped me learn Ember.js.

The code is on GitHub: https://github.com/channingallen/tower-defense

View on HN

In Firefox on Linux (44.0.2), Wave 3 don't seem to be working as intended because for the second tower group you've got:

    div.board__tower-group
        div.tower-group__tower
        div.tower-group__tower
        div.board__tower-group--body

and, even though it's `position:absolute`, Firefox is taking that third child into account when applying `justify-content:space-between`, placing the first tower on the left and the second in the center instead of on the right.

Edit: Here's the Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=874718

Just put in a fix which works on Mac OS X and should work on Linux as well.

Same deal in Iceweasel 41.0 - thought I was missing something crucial!

Can someone explain to me why this only happens on linux?

No, because it's not a Linux only bug. There's a Mac OS X report below, which I can confirm.

Ah, thanks for the tip. Looking into it.

It didn't work in Firefox on Windows 10 either.

A suggestion: don't wiggle the editor when there's a problem, or move the help icon outside. I wanted to check the "?" icon a couple of times, but couldn't click it because it was wiggling with the editor.

It's really frustrating.

Unless I'm crazy, wave 6 requires align-self on the individual items, which is not mentioned in the help boxes, ever.

Or am I missing something, and not adjusting individual items would still work there?

Edit: Yeah, I'm missing something. /headdesk :)

align-items: center; justify-content: space-between;

seems to work.

and align-self is mentioned on wave 10.

This is just awesome! Huge thanks for teaching me flexbox today.

Reply on news.ycombinator.com