Flexbox Froggy

by saaspirant • 3 years ago

499 68 3 years ago

clone1018• 3 years ago

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

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/73cb0585656c0537288a55...

cipherself• 3 years ago

This is great, I used this years ago when I was learning about flexbox.

There's also https://codepip.com/games/grid-garden/ by the same author that uses the same approach for CSS Grids.

bajsejohannes• 3 years 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/

airstrike• 3 years ago

One might even say these games have a cascading level of difficulty

skilled• 3 years ago

Other interesting games for learning CSS,

https://cssgridgarden.com/ (basically Froggy for Grid)

https://cssbattle.dev/ (a platform for doing various challenges, huge community)

https://flukeout.github.io/ (learn about CSS selectors)

https://css-animations.io/ (practice CSS animations)

Huppie• 3 years ago

Not sure if it's still a fully free thing but I also remember having a go at https://flexboxzombies.com/ in the past.

brandall10• 3 years ago

It's still free!

thaumasiotes2• 3 years 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.

iterateAutomate• 3 years 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-a... (describes flex-grow, flex-shrink, flex-basis)

tuukkah2• 3 years ago

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

moron4hire2• 3 years ago

Well, I clearly understand nothing about CSS position. I could consistently answer all the other questions, but position I consistently failed.

tuukkah2• 3 years 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_...

rco8786• 3 years ago

Very cool!

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

victor106• 3 years ago

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

doytch• 3 years 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?

dsego3• 3 years 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.

moron4hire2• 3 years 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• 3 years 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.

gardenhedge• 3 years ago

Grid can do 1D (horizontal or vertical) or 2D (horizontal and vertical simultaneously). Flexbox can just do 1D (horizontal or vertical).

So if you wanted, you could just use Grid... although Flexbox could be considered slightly more striaghtforward for 1D stuff.

marcosdumay• 3 years ago

Flexbox aligns things while grid mostly allocates specific space for them.

So, if I need alignment, I go with flexbox. If I have all the elements sketched-up in a design, I go with grid.

noman-land• 3 years ago

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

atonse• 3 years 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.

Tempest1981• 3 years ago

Comments from 2015:

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

sirius87• 3 years 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)

dsego3• 3 years 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.

klabb32• 3 years 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”.

qingcharles3• 3 years 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_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.

krsdcbl3• 3 years ago

The 1% are difficult to learn, because you only need them in 1% of the cases ;)

l3x4ur1n• 3 years ago

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

FigurativeVoid• 3 years ago

Flexbox zombies is also great!

Waterluvian• 3 years 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• 3 years ago

Haha USB-C solves this for cables. What would be the analog for page style?

matsz2• 3 years 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...

Helps a lot when working with applications that need to support both LTR and RTL languages.

klabb32• 3 years 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.

krsdcbl3• 3 years 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

nicoburns2• 3 years ago

Indeed. The rule for anyone wondering is:

- "justify-" is for the primary axis.

- "align-" for the secondary one

- "-content" is for grid tracks / rows in flex-wrap containers.

- "-items is for individual children (within the row / grid cell)

I would also definitely prefer clearer names.

qingcharles3• 3 years ago

It's so tempting to want to label them horizontal and vertical etc, but I have to work with Arabic which is all reversed, and then I'm setting up a test localization in Traditional Mongolian, and you realize why these things are named the way they are:

http://khumuunbichig.montsame.mn/index.php?home

frob• 3 years ago

I've been writing HTML since the mid-90s and have been a professional web developer for a decade. I frequently reference the flexbox[0] and grid guides[1] from CSS Tricks. I have both of the summary sheets printed out and sitting on my desk. They are invaluable resources.

[0] https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[1] https://css-tricks.com/snippets/css/complete-guide-grid/

ekun• 3 years ago

I printed out a nice 1-page guide to flexbox a few weeks ago and keep it on my desk, and it's a great reference.

kmoser• 3 years ago

Flexbox and grid get all the limelight but let's not forget the usefulness of columns: https://developer.mozilla.org/en-US/docs/Web/CSS/columns

RheingoldRiver• 3 years ago

The way to remember justify is that in flex-row, justify is along the horizontal axis. And, in word processors like msword, you can set the text to "justify" which gives you clean edges on each side. I don't know the history of the word `justify` in flexbox but I would imagine it came from here. So since you know how it works in flex-row, then you know it's primary axis in both.

For items vs content: You always have items no matter what. But you don't need to do anything to the entire content besides justify/align until you have multiple rows with flex-wrap. There's simply no effect that align-content could possibly have here. So items is for individual children, and content is for entire rows.

So tldr: Justify is like the "justify" option in word processors, and align is the opposite one; you always have items, but aligning the content won't change anything until you have 2 rows/cols.

Remember these 2 things and you probably won't forget which is which ever again.

(That said, I do often forget if flex starts out row or column, but that's relatively unimportant to know, because the way I get around this is by always adding the direction when I say "display:flex".)

holoduke• 3 years ago

I always use chrome inspector to define my css for an element. It has a nice flexbox editor. Just play around. Copy css and paste in your project.

pikelet• 3 years ago

For me it's the flex-basis, -grow, -shrink that I can never get my head around. But I don't need to worry about that very often (which I guess is why it never really sticks in my head).

yieldcrv• 3 years ago

the years are probably part of the problem

there are so many shims and polyfills amongst actual solutions now

CraigJPerry• 3 years 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.

matsz2• 3 years 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.

phforms• 3 years ago

I actually frequently use the Tailwind 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• 3 years 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• 3 years ago

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

ChrisArchitect• 3 years ago

(2015)

matheusmoreira• 3 years ago

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

cuddlyogre• 3 years 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• 3 years ago

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

nilslindemann• 3 years ago

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

Zufriedenheit• 3 years 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• 3 years 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• 3 years 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• 3 years ago

https://news.ycombinator.com/item?id=30251054 2022 (317 points, 31 comments)

https://news.ycombinator.com/item?id=22629903 2020 (27 points, 2 comments)

https://news.ycombinator.com/item?id=21796926 2019 (2 points, 0 comments)

https://news.ycombinator.com/item?id=18752031 2018 (3 points, 0 comments)

https://news.ycombinator.com/item?id=18731852 2018 (6 points, 1 comment)

https://news.ycombinator.com/item?id=15605783 2017 (4 points, 0 comments)

https://news.ycombinator.com/item?id=14349739 2017 (3 points, 0 comments)

https://news.ycombinator.com/item?id=10652909 2015 (315 points, 69 comments)

darekkay• 3 years ago

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

emmacharp• 3 years ago

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

50• 3 years ago

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

Flexbox Froggy

Related Stories