Flexbox Froggy

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

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)

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

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.

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.

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/

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

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".)

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.

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).

the years are probably part of the problem

there are so many shims and polyfills amongst actual solutions now

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/

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

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.

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.

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?

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.

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.

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.

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.

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.

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

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...

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.

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.

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.