8 ms·

Flexbox Froggy

499 points by saaspirant 3y ago

clone1018 3y ago
Fun stuff, got through all the levels but the difficulty only really scales on the last level!
- SandraBucky 3y ago
  Yeah it does. I also made it to the last level only to find how hard it is to solve. For anyone curious, https://gist.github.com/tonyantony300/73cb0585656c0537288a55b28f924dc6 https://gist.github.com/tonyantony300/73cb0585656c0537288a55...
cipherself 3y ago
This is great, I used this years ago when I was learning about flexbox. There's also https://codepip.com/games/grid-garden/ https://codepip.com/games/grid-garden/ by the same author that uses the same approach for CSS Grids.
- bajsejohannes 3y ago
  Games seem to be a great way to learn CSS. I'm guessing because it has very natural learning path were you can solve increasingly hard problems that all seem easy because of what you've already learned. I enjoyed this game to learn CSS selectors a while ago: https://flukeout.github.io/ https://flukeout.github.io/
  - airstrike 3y ago
    One might even say these games have a cascading level of difficulty
skilled 3y ago
Other interesting games for learning CSS, https://cssgridgarden.com/ https://cssgridgarden.com/ (basically Froggy for Grid) https://cssbattle.dev/ https://cssbattle.dev/ (a platform for doing various challenges, huge community) https://flukeout.github.io/ https://flukeout.github.io/ (learn about CSS selectors) https://css-animations.io/ https://css-animations.io/ (practice CSS animations)
- iterateAutomate 3y ago
  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-and-flex-basis/ https://css-tricks.com/understanding-flex-grow-flex-shrink-a... (describes flex-grow, flex-shrink, flex-basis)
- Huppie 3y ago
  Not sure if it's still a fully free thing but I also remember having a go at https://flexboxzombies.com/ https://flexboxzombies.com/ in the past.
  - brandall10 3y ago
    It's still free!
  - thaumasiotes 3y ago
    Created an account and attempted to start in Firefox: got some kind of endless loading animation. Opened an Edge window, attempted to sign in: had a long wait followed by an error message about a network failure.
tuukkah 3y ago
Guess CSS also has a section about Flexbox, but it focuses more on reading than writing CSS: https://www.guess-css.app/ https://www.guess-css.app/
- moron4hire 3y ago
  Well, I clearly understand nothing about CSS position. I could consistently answer all the other questions, but position I consistently failed.
  - tuukkah 3y ago
    I think you need to learn by heart what each of the 5 position values means. After that, the tricky part is understanding what the width/height/top/bottom/left/right values are relative to i.e. the containing block and how that works: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_...
rco8786 3y ago
Very cool! As an aside, I've learned so many things via games like this. Including vim (via https://vim-adventures.com/ https://vim-adventures.com/), which I now basically can't live without.
noman-land 3y ago
Love Flexbox Froggy. I would wager that an entire generation of developers learned flexbox from this website. I certainly did.
- atonse 3y ago
  For me Flexbox Froggy finally helped flexbox concepts “click” in my brain. And by that time I had been using CSS for 15 years. Amazing educational tool.
victor106 3y ago
Question from a CSS noob, When would you use Flexbox vs Grid?
- doytch 3y ago
  My personal heuristic: - Start with Flexbox. Flexboxes of flexboxes will solve almost everything that’s common, and be easier to reason through and maintain imo. - If you’re doing something that appears tabular, use Grid. Flexbox will appear as though it’ll get you there, but the moment you start having cell contents that are highly variable in size your columns will start to get out of sync. - The above is esp the case if you’re trying to do repeating sets of rows. Eg Row type A, row type B, A, B, etc. That’s a Grid problem. But of course, the only way to get good mental models is by trying both approaches and seeing what the drawbacks are. Maybe try the Grid games that folks have linked in other comments?
- dsego 3y ago
  Flexbox for most stuff, resort to grid only if flexbox can't solve your layout. The way I see it, if there is horizontal or vertical stacking, it's flexbox. And since you can nest, it covers a wide ranged of typical layout patterns (boxes within boxes). One caveat, since flexbox only arranges vertically or horizontally, you have to insert container flex elements, which means it affects the markup, so you are a bit constrained if you want to make it really responsive and rearrange everything based on viewport size. Grid is more complex, and useful for fixed layouts when things have to align more. With sub-grid support it will be even more powerful.
  - moron4hire 3y ago
    I tend to default to grid, especially for the top level page layout. I did it easier to reason about how it's going to look by just configuring the container. Less styling has to be specified for the child elements, especially when defining named areas.
- emadda 3y ago
  The reasons I sometimes use grid over flex: - You can align things in 2D space, not just along a single axis (like flex). Great for the top level layout of a site/UI. - You can have white space. I often create white space (empty grid cell) in my UI so I can add UI elements there if needed later on. Works well with elements that are conditionally rendered, as these will change flex layouts but elements assigned to a grid cell will not move.
Tempest1981 3y ago
Comments from 2015: https://news.ycombinator.com/item?id=10652909 https://news.ycombinator.com/item?id=10652909
Andrew018 3y ago
[dead]
sirius87 3y ago
This is very useful. I always end up Googling vertical align for flexbox. In a rush, what would help me refresh flexbox knowledge is being able to drag and drop the frog, snapped to a 3x3 grid, and get the flexbox CSS code as output. Still a very thoughtful tutorial. (EDIT: The reason I said the above is I've personally given up on keeping up with new CSS stuff. Having written CSS off and on since IE7 days, basically I have no energy to keep css tricks in memory, having lived through hand coding vendor prefix flags and whatever the new Chrome Canary is thrusting down the pipe)
- dsego 3y ago
  No tricks anymore, not much to keep up, flexbox and grid are the end-game. And for most UI cases flexbox is all you need, it's basically stack/group (or vbox/hbox), so you can arrange items vertically or horizontally. Learn flexbox, it's the most useful thing for layouts that's come to css, and it's really simple, there are options for spacing (gap), justify and align, that's pretty much 99% of cases right there.
  - klabb3 3y ago
    Nesting of flexboxes can be tricky though – especially when you have elements that fill “the rest of the width/height”. I’ve found that grids are a little easier to maintain a flat hierarchy and avoid complexity, but the downside is it also doesn’t modularize that well – you need to compose all the cells together, some of which probably should belong in a child “component”.
    - dsego 3y ago
      Sub-grids will solve the grid in child component I think.
  - qingcharles 3y ago
    I need the 1%. I want browser masonry support. Right now only Safari has it baked in properly, the rest I have to code around in a sub-optimal way: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la... I think Safari has it because the guy that wrote the spec now works at Apple. Not 100% sure of that, but seems that way. The code is in Chromium, just nobody ever hit the GO button.
l3x4ur1n 3y ago
this is also fun https://flexboxzombies.com/p/flexbox-zombies https://flexboxzombies.com/p/flexbox-zombies
FigurativeVoid 3y ago
Flexbox zombies is also great!
Waterluvian 3y ago
Doesn’t matter how many years I work with CSS, I will always confuse flex things like align-content and align-items, like inserting a USB cable wrongly, every single time. Oh and align vs justify. CSS grid is incredible too. I can’t believe how spoiled we are now with amazing layout options.
- catlifeonmars 3y ago
  Haha USB-C solves this for cables. What would be the analog for page style?
  - matsz 3y ago
    WYSIWYG editors like Microsoft Frontpage :) Actually though, not really an analog, but surprisingly something not many people are aware enough of - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical... Helps a lot when working with applications that need to support both LTR and RTL languages.
- klabb3 3y ago
  I think they were trying to be generic over “flex-direction”, meaning that attributes like flex-align depends on the “direction” of the parent. It’s very rare that you change the direction and really benefit from that. I don’t know if that’s the only reason, so I’m not gonna say it was a bad choice. But at least to me, I’m exactly like you in the sense that I can’t remember which one is which. I would have preferred either better naming that references the axis, or simply have the attributes be independent of the parent. Until then, I have to use a cheat sheet.
  - krsdcbl 3y ago
    its multiple directions at play, since the "cardinal directions" of the parent aren't defined by flex-direction alone. If the writing-mode of a parent block formatting context is set to a vertical mode, then flexbox' "row" will run vertically - which is why flexbox directions are "row" and "column", and can only thought of as "vertical/horizontal" in "horizontal-tb" writing mode. Further, there's no "bottom to top" mode for horizontal scripts, but vertical modes can have a block axis running either ltr or rtl, affecting the direction of the flex cross axis. Which likely leads to the necessity to also abstract "row-reverse" and "column-reverse" directions for the ordering of items. now as for distribution of items on either axis (whichever direction it may have), referring rows/columns when might become misleading, and also having to address individual rows (align-content) complicates things. Finding another set of terms for flexbox alone might start to become messy, since display:grid and multicolumn layouts will also require these settings. I don't know the actual origin of align & justify either, but I have the feeling coming up with better terms might not be that easy
CraigJPerry 3y ago
It’s fashionable to crap on tailwind in some css circles but nothing else has improved my CSS knowledge so quickly - it’s specifically when used with the tailwind plugin in vscode, it shows the underlying css in popups and it’s addictive to guess what the underlying css will be for a given utility class and then quickly check. That said, flexbox froggy and the other grid garden game were fun. Also find myself regularly going for the css tricks reference page for both of these.
- matsz 3y ago
  I've started my journey with CSS when Bootstrap was pretty much the only relevant CSS framework; and can confirm. There was no VS Code (Notepad++, anyone?), but Chrome Dev Tools were very useful when trying to understand what's actually going on and that + trying to "Inspect Element" random websites actually taught me CSS. Fun fact: border-radius wasn't supported well until one year (2010) before Bootstrap (2011) was first released. You had to do rounded corners with some annoying background-image hacks.
- deleted 3y ago
  [deleted]
- phforms 3y ago
  I actually frequently use the Tailwind docs (https://tailwindcss.com/docs/ https://tailwindcss.com/docs/) to lookup CSS property names and what they do, especially with flexbox and grid, since I mostly learned them through Tailwind. It’s just a nicely organized quick reference with lots of examples. Not using Tailwind as much these days (more inclined to CSS-in-JS solutions like Stitches, which unfortunately has been abandoned by the developers), but for prototyping it’s still amazing.
- PUSH_AX 3y ago
  In all my years I’ve never seen such a polarising technology as tailwind. It’s really weird the lengths people will go through to defend their method of outputting key/value pairs to move things around on a webpage.
xtrohnx 3y ago
A great sequel to the lesser known "Tables Tarantula" of 1999.
ChrisArchitect 3y ago
(2015)
matheusmoreira 3y ago
I recently got up to speed on CSS flexbox thanks to this game. Really great!
cuddlyogre 3y ago
Today I learned about the order attribute, which would have come in handy this year. Due to the magic of working primarily with perfectly functional but older projects, I only recently got the chance to start using flexbox. I immediately loved it far more than the float/clearfix headache I was used to. The only thing that trips me up is the difference in naming with justify-content and align-items. I feel should both be (justify|align)-(THE SAME THING). edit: Just got to 21. Looks like my confusion is common enough that there's a level about it.
nilsbunger 3y ago
Cool. I’d love to see a version for Tailwind!
nilslindemann 3y ago
The box just wiggles when uBlock is enabled, and one can not navigate to the next chapter.
Zufriedenheit 3y ago
Wonder how to finish the last level. Need to target the yellow frogs as items but in the editor there is only a selector for the pond?
- farigiss 3y ago
  flex-direction: column-reverse; flex-wrap: wrap-reverse; justify-content: center; align-content: space-between; The yellow froggies end up separated by wrapping. Then it's just a matter of aligning them. The align-self and order attributes mentioned seem to be red herrings.
- jasmataz 3y ago
  I felt the same way at first because I didn't know about wrap-reverse, but you can do it all using only the #pond selector
paulddraper 3y ago
Previous: https://news.ycombinator.com/item?id=30251054 https://news.ycombinator.com/item?id=30251054 2022 (317 points, 31 comments) https://news.ycombinator.com/item?id=22629903 https://news.ycombinator.com/item?id=22629903 2020 (27 points, 2 comments) https://news.ycombinator.com/item?id=21796926 https://news.ycombinator.com/item?id=21796926 2019 (2 points, 0 comments) https://news.ycombinator.com/item?id=18752031 https://news.ycombinator.com/item?id=18752031 2018 (3 points, 0 comments) https://news.ycombinator.com/item?id=18731852 https://news.ycombinator.com/item?id=18731852 2018 (6 points, 1 comment) https://news.ycombinator.com/item?id=15605783 https://news.ycombinator.com/item?id=15605783 2017 (4 points, 0 comments) https://news.ycombinator.com/item?id=14349739 https://news.ycombinator.com/item?id=14349739 2017 (3 points, 0 comments) https://news.ycombinator.com/item?id=10652909 https://news.ycombinator.com/item?id=10652909 2015 (315 points, 69 comments)
darekkay 3y ago
For anyone having trouble remembering all the flexbox properties, I've created a cheat sheet: https://darekkay.com/flexbox-cheatsheet/ https://darekkay.com/flexbox-cheatsheet/
emmacharp 3y ago
Can't help but think that these games are to CSS development what Guitar Hero was to guitar playing...
50 3y ago
See also Josh Comeau's interactive guide to flexbox: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/ https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...
Hunnam545 3y ago
[dead]

Flexbox Froggy

499 points by saaspirant 3y ago

clone1018 3y ago

Fun stuff, got through all the levels but the difficulty only really scales on the last level!

SandraBucky 3y ago
Yeah it does. I also made it to the last level only to find how hard it is to solve. For anyone curious, https://gist.github.com/tonyantony300/73cb0585656c0537288a55b28f924dc6 https://gist.github.com/tonyantony300/73cb0585656c0537288a55...

cipherself 3y ago

This is great, I used this years ago when I was learning about flexbox. There's also https://codepip.com/games/grid-garden/ https://codepip.com/games/grid-garden/ by the same author that uses the same approach for CSS Grids.

bajsejohannes 3y ago
Games seem to be a great way to learn CSS. I'm guessing because it has very natural learning path were you can solve increasingly hard problems that all seem easy because of what you've already learned. I enjoyed this game to learn CSS selectors a while ago: https://flukeout.github.io/ https://flukeout.github.io/
- airstrike 3y ago
  One might even say these games have a cascading level of difficulty

skilled 3y ago

Other interesting games for learning CSS, https://cssgridgarden.com/ https://cssgridgarden.com/ (basically Froggy for Grid) https://cssbattle.dev/ https://cssbattle.dev/ (a platform for doing various challenges, huge community) https://flukeout.github.io/ https://flukeout.github.io/ (learn about CSS selectors) https://css-animations.io/ https://css-animations.io/ (practice CSS animations)

iterateAutomate 3y ago
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-and-flex-basis/ https://css-tricks.com/understanding-flex-grow-flex-shrink-a... (describes flex-grow, flex-shrink, flex-basis)
Huppie 3y ago
Not sure if it's still a fully free thing but I also remember having a go at https://flexboxzombies.com/ https://flexboxzombies.com/ in the past.
- brandall10 3y ago
  It's still free!
- thaumasiotes 3y ago
  Created an account and attempted to start in Firefox: got some kind of endless loading animation. Opened an Edge window, attempted to sign in: had a long wait followed by an error message about a network failure.

tuukkah 3y ago

Guess CSS also has a section about Flexbox, but it focuses more on reading than writing CSS: https://www.guess-css.app/ https://www.guess-css.app/

moron4hire 3y ago
Well, I clearly understand nothing about CSS position. I could consistently answer all the other questions, but position I consistently failed.
- tuukkah 3y ago
  I think you need to learn by heart what each of the 5 position values means. After that, the tricky part is understanding what the width/height/top/bottom/left/right values are relative to i.e. the containing block and how that works: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_...

rco8786 3y ago

Very cool! As an aside, I've learned so many things via games like this. Including vim (via https://vim-adventures.com/ https://vim-adventures.com/), which I now basically can't live without.

noman-land 3y ago

Love Flexbox Froggy. I would wager that an entire generation of developers learned flexbox from this website. I certainly did.

atonse 3y ago
For me Flexbox Froggy finally helped flexbox concepts “click” in my brain. And by that time I had been using CSS for 15 years. Amazing educational tool.

victor106 3y ago

Question from a CSS noob, When would you use Flexbox vs Grid?

doytch 3y ago
My personal heuristic: - Start with Flexbox. Flexboxes of flexboxes will solve almost everything that’s common, and be easier to reason through and maintain imo. - If you’re doing something that appears tabular, use Grid. Flexbox will appear as though it’ll get you there, but the moment you start having cell contents that are highly variable in size your columns will start to get out of sync. - The above is esp the case if you’re trying to do repeating sets of rows. Eg Row type A, row type B, A, B, etc. That’s a Grid problem. But of course, the only way to get good mental models is by trying both approaches and seeing what the drawbacks are. Maybe try the Grid games that folks have linked in other comments?
dsego 3y ago
Flexbox for most stuff, resort to grid only if flexbox can't solve your layout. The way I see it, if there is horizontal or vertical stacking, it's flexbox. And since you can nest, it covers a wide ranged of typical layout patterns (boxes within boxes). One caveat, since flexbox only arranges vertically or horizontally, you have to insert container flex elements, which means it affects the markup, so you are a bit constrained if you want to make it really responsive and rearrange everything based on viewport size. Grid is more complex, and useful for fixed layouts when things have to align more. With sub-grid support it will be even more powerful.
- moron4hire 3y ago
  I tend to default to grid, especially for the top level page layout. I did it easier to reason about how it's going to look by just configuring the container. Less styling has to be specified for the child elements, especially when defining named areas.
emadda 3y ago
The reasons I sometimes use grid over flex: - You can align things in 2D space, not just along a single axis (like flex). Great for the top level layout of a site/UI. - You can have white space. I often create white space (empty grid cell) in my UI so I can add UI elements there if needed later on. Works well with elements that are conditionally rendered, as these will change flex layouts but elements assigned to a grid cell will not move.

Tempest1981 3y ago

Comments from 2015: https://news.ycombinator.com/item?id=10652909 https://news.ycombinator.com/item?id=10652909

Andrew018 3y ago

[dead]

sirius87 3y ago

This is very useful. I always end up Googling vertical align for flexbox. In a rush, what would help me refresh flexbox knowledge is being able to drag and drop the frog, snapped to a 3x3 grid, and get the flexbox CSS code as output. Still a very thoughtful tutorial. (EDIT: The reason I said the above is I've personally given up on keeping up with new CSS stuff. Having written CSS off and on since IE7 days, basically I have no energy to keep css tricks in memory, having lived through hand coding vendor prefix flags and whatever the new Chrome Canary is thrusting down the pipe)

dsego 3y ago
No tricks anymore, not much to keep up, flexbox and grid are the end-game. And for most UI cases flexbox is all you need, it's basically stack/group (or vbox/hbox), so you can arrange items vertically or horizontally. Learn flexbox, it's the most useful thing for layouts that's come to css, and it's really simple, there are options for spacing (gap), justify and align, that's pretty much 99% of cases right there.
- klabb3 3y ago
  Nesting of flexboxes can be tricky though – especially when you have elements that fill “the rest of the width/height”. I’ve found that grids are a little easier to maintain a flat hierarchy and avoid complexity, but the downside is it also doesn’t modularize that well – you need to compose all the cells together, some of which probably should belong in a child “component”.
  - dsego 3y ago
    Sub-grids will solve the grid in child component I think.
- qingcharles 3y ago
  I need the 1%. I want browser masonry support. Right now only Safari has it baked in properly, the rest I have to code around in a sub-optimal way: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la... I think Safari has it because the guy that wrote the spec now works at Apple. Not 100% sure of that, but seems that way. The code is in Chromium, just nobody ever hit the GO button.

l3x4ur1n 3y ago

this is also fun https://flexboxzombies.com/p/flexbox-zombies https://flexboxzombies.com/p/flexbox-zombies

FigurativeVoid 3y ago

Flexbox zombies is also great!

Waterluvian 3y ago

Doesn’t matter how many years I work with CSS, I will always confuse flex things like align-content and align-items, like inserting a USB cable wrongly, every single time. Oh and align vs justify. CSS grid is incredible too. I can’t believe how spoiled we are now with amazing layout options.

catlifeonmars 3y ago
Haha USB-C solves this for cables. What would be the analog for page style?
- matsz 3y ago
  WYSIWYG editors like Microsoft Frontpage :) Actually though, not really an analog, but surprisingly something not many people are aware enough of - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical... Helps a lot when working with applications that need to support both LTR and RTL languages.
klabb3 3y ago
I think they were trying to be generic over “flex-direction”, meaning that attributes like flex-align depends on the “direction” of the parent. It’s very rare that you change the direction and really benefit from that. I don’t know if that’s the only reason, so I’m not gonna say it was a bad choice. But at least to me, I’m exactly like you in the sense that I can’t remember which one is which. I would have preferred either better naming that references the axis, or simply have the attributes be independent of the parent. Until then, I have to use a cheat sheet.
- krsdcbl 3y ago
  its multiple directions at play, since the "cardinal directions" of the parent aren't defined by flex-direction alone. If the writing-mode of a parent block formatting context is set to a vertical mode, then flexbox' "row" will run vertically - which is why flexbox directions are "row" and "column", and can only thought of as "vertical/horizontal" in "horizontal-tb" writing mode. Further, there's no "bottom to top" mode for horizontal scripts, but vertical modes can have a block axis running either ltr or rtl, affecting the direction of the flex cross axis. Which likely leads to the necessity to also abstract "row-reverse" and "column-reverse" directions for the ordering of items. now as for distribution of items on either axis (whichever direction it may have), referring rows/columns when might become misleading, and also having to address individual rows (align-content) complicates things. Finding another set of terms for flexbox alone might start to become messy, since display:grid and multicolumn layouts will also require these settings. I don't know the actual origin of align & justify either, but I have the feeling coming up with better terms might not be that easy

CraigJPerry 3y ago

It’s fashionable to crap on tailwind in some css circles but nothing else has improved my CSS knowledge so quickly - it’s specifically when used with the tailwind plugin in vscode, it shows the underlying css in popups and it’s addictive to guess what the underlying css will be for a given utility class and then quickly check. That said, flexbox froggy and the other grid garden game were fun. Also find myself regularly going for the css tricks reference page for both of these.

matsz 3y ago
I've started my journey with CSS when Bootstrap was pretty much the only relevant CSS framework; and can confirm. There was no VS Code (Notepad++, anyone?), but Chrome Dev Tools were very useful when trying to understand what's actually going on and that + trying to "Inspect Element" random websites actually taught me CSS. Fun fact: border-radius wasn't supported well until one year (2010) before Bootstrap (2011) was first released. You had to do rounded corners with some annoying background-image hacks.
deleted 3y ago
[deleted]
phforms 3y ago
I actually frequently use the Tailwind docs (https://tailwindcss.com/docs/ https://tailwindcss.com/docs/) to lookup CSS property names and what they do, especially with flexbox and grid, since I mostly learned them through Tailwind. It’s just a nicely organized quick reference with lots of examples. Not using Tailwind as much these days (more inclined to CSS-in-JS solutions like Stitches, which unfortunately has been abandoned by the developers), but for prototyping it’s still amazing.
PUSH_AX 3y ago
In all my years I’ve never seen such a polarising technology as tailwind. It’s really weird the lengths people will go through to defend their method of outputting key/value pairs to move things around on a webpage.

xtrohnx 3y ago

A great sequel to the lesser known "Tables Tarantula" of 1999.

ChrisArchitect 3y ago

(2015)

matheusmoreira 3y ago

I recently got up to speed on CSS flexbox thanks to this game. Really great!

cuddlyogre 3y ago

Today I learned about the order attribute, which would have come in handy this year. Due to the magic of working primarily with perfectly functional but older projects, I only recently got the chance to start using flexbox. I immediately loved it far more than the float/clearfix headache I was used to. The only thing that trips me up is the difference in naming with justify-content and align-items. I feel should both be (justify|align)-(THE SAME THING). edit: Just got to 21. Looks like my confusion is common enough that there's a level about it.

nilsbunger 3y ago

Cool. I’d love to see a version for Tailwind!

nilslindemann 3y ago

The box just wiggles when uBlock is enabled, and one can not navigate to the next chapter.

Zufriedenheit 3y ago

Wonder how to finish the last level. Need to target the yellow frogs as items but in the editor there is only a selector for the pond?

farigiss 3y ago
flex-direction: column-reverse; flex-wrap: wrap-reverse; justify-content: center; align-content: space-between; The yellow froggies end up separated by wrapping. Then it's just a matter of aligning them. The align-self and order attributes mentioned seem to be red herrings.
jasmataz 3y ago
I felt the same way at first because I didn't know about wrap-reverse, but you can do it all using only the #pond selector

paulddraper 3y ago

Previous: https://news.ycombinator.com/item?id=30251054 https://news.ycombinator.com/item?id=30251054 2022 (317 points, 31 comments) https://news.ycombinator.com/item?id=22629903 https://news.ycombinator.com/item?id=22629903 2020 (27 points, 2 comments) https://news.ycombinator.com/item?id=21796926 https://news.ycombinator.com/item?id=21796926 2019 (2 points, 0 comments) https://news.ycombinator.com/item?id=18752031 https://news.ycombinator.com/item?id=18752031 2018 (3 points, 0 comments) https://news.ycombinator.com/item?id=18731852 https://news.ycombinator.com/item?id=18731852 2018 (6 points, 1 comment) https://news.ycombinator.com/item?id=15605783 https://news.ycombinator.com/item?id=15605783 2017 (4 points, 0 comments) https://news.ycombinator.com/item?id=14349739 https://news.ycombinator.com/item?id=14349739 2017 (3 points, 0 comments) https://news.ycombinator.com/item?id=10652909 https://news.ycombinator.com/item?id=10652909 2015 (315 points, 69 comments)

darekkay 3y ago

For anyone having trouble remembering all the flexbox properties, I've created a cheat sheet: https://darekkay.com/flexbox-cheatsheet/ https://darekkay.com/flexbox-cheatsheet/

emmacharp 3y ago

Can't help but think that these games are to CSS development what Guitar Hero was to guitar playing...

50 3y ago

See also Josh Comeau's interactive guide to flexbox: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/ https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...

Hunnam545 3y ago

[dead]