[HN Gopher] Flexbox Froggy
___________________________________________________________________
Flexbox Froggy
Author : saaspirant
Score : 345 points
Date : 2023-09-30 08:05 UTC (14 hours ago)
(HTM) web link (flexboxfroggy.com)
(TXT) w3m dump (flexboxfroggy.com)
| matheusmoreira wrote:
| I recently got up to speed on CSS flexbox thanks to this game.
| Really great!
| tuukkah wrote:
| Guess CSS also has a section about Flexbox, but it focuses more
| on reading than writing CSS: https://www.guess-css.app/
| moron4hire wrote:
| Well, I clearly understand nothing about CSS position. I could
| consistently answer all the other questions, but position I
| consistently failed.
| tuukkah wrote:
| 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_...
| nilsbunger wrote:
| Cool. I'd love to see a version for Tailwind!
| Zufriedenheit wrote:
| 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 wrote:
| 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 wrote:
| 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
| sirius87 wrote:
| 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 wrote:
| 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.
| qingcharles wrote:
| 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.
| klabb3 wrote:
| 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 wrote:
| Sub-grids will solve the grid in child component I think.
| cuddlyogre wrote:
| 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.
| l3x4ur1n wrote:
| this is also fun https://flexboxzombies.com/p/flexbox-zombies
| Waterluvian wrote:
| 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.
| holoduke wrote:
| 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.
| catlifeonmars wrote:
| Haha USB-C solves this for cables. What would be the analog for
| page style?
| matsz wrote:
| 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.
| frob wrote:
| 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/
| nicoburns wrote:
| 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.
| qingcharles wrote:
| 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
| nicoburns wrote:
| CSS actually already accounts for that with it's "inline"
| and "block" axes. Where inline is the axis along which text
| flows first (horizontal by default for latin text -
| although this can be overiden with the writing-mode
| property), and block is the other axis. Flexbox's main axis
| controlled by flex-direction is an extra abstraction on top
| of that.
| klabb3 wrote:
| 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.
| kmoser wrote:
| 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 wrote:
| 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".)
| victor106 wrote:
| Question from a CSS noob, When would you use Flexbox vs Grid?
| marcosdumay wrote:
| 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.
| doytch wrote:
| 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 wrote:
| 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 wrote:
| 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.
| gardenhedge wrote:
| 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.
| emadda wrote:
| 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.
| nilslindemann wrote:
| The box just wiggles when uBlock is enabled, and one can not
| navigate to the next chapter.
| noman-land wrote:
| Love Flexbox Froggy. I would wager that an entire generation of
| developers learned flexbox from this website. I certainly did.
| atonse wrote:
| 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.
| clone1018 wrote:
| Fun stuff, got through all the levels but the difficulty only
| really scales on the last level!
| SandraBucky wrote:
| 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...
| darekkay wrote:
| For anyone having trouble remembering all the flexbox properties,
| I've created a cheat sheet: https://darekkay.com/flexbox-
| cheatsheet/
| ChrisArchitect wrote:
| (2015)
| cipherself wrote:
| 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 wrote:
| 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 wrote:
| One might even say these games have a cascading level of
| difficulty
| rco8786 wrote:
| 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.
| FigurativeVoid wrote:
| Flexbox zombies is also great!
| CraigJPerry wrote:
| 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.
| PUSH_AX wrote:
| 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.
| matsz wrote:
| 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 wrote:
| 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.
| [deleted]
| Andrew018 wrote:
| [dead]
| xtrohnx wrote:
| A great sequel to the lesser known "Tables Tarantula" of 1999.
| skilled wrote:
| 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 wrote:
| 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 wrote:
| It's still free!
| paulddraper wrote:
| Previous:
|
| 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)
| Tempest1981 wrote:
| Comments from 2015:
|
| https://news.ycombinator.com/item?id=10652909
___________________________________________________________________
(page generated 2023-09-30 23:00 UTC)