Level 24 too abrupt about flexboxfroggy HOT 16 OPEN

Yeah, I didn't even know wrap-reverse existed until I gave up and came here via the github link on the site.

I didn't think want to google for an answer since I thought I was taught everything I needed to know to complete the problem :(

@SergiOnGit Here's what I ended up with after learning about wrap-reverse:

flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;

from flexboxfroggy.

Yeah, considering that no level prior to level 24 has you use wrap-reverse (it's just mentioned in the explanatory text without having the user try it), I think it's a little too abrupt. All that's needed is an additional level after the introduction of flex-wrap that demonstrates wrap-reverse interactively.

from flexboxfroggy.

I think having a wrap-reverse exercise somewhere before level 24 would ease the learning curve here.

from flexboxfroggy.

Figure out that transform: scale(-1, 1) works as a replacement for flex-wrap: wrap-reverse.
Only for this example as it's symmetrical.

from flexboxfroggy.

flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;

from flexboxfroggy.

Hi @solsend2l, thanks for your comments!

I agree that level 24 is pretty tough, but I intended it to be like that to give the opportunity to play around with all of the properties one last time, and as a "boss level" final challenge to add a sense of accomplishment.

I hope you found the previous 23 levels to have a smooth learning curve.

from flexboxfroggy.

Honestly I had to cheat, look at code 👅

from flexboxfroggy.

+1 Agreed. I think this would be be better with some more exercises. My brain went Woh! when I got to 24. I'm glad to find part of the answer here.

This is a fantastic tutorial, that still has so much more potential. I think as a learning site, a boss level shows its weaknesses, rather than what it can do for the student. A number of exercises up to the boss level would really reinforce the concepts and make them masters.

...tempted to fork and add some, myself.

from flexboxfroggy.

I agree 24 hit as a bit of a shock but it forced me to find the answer elsewhere and in the process found other resources.

from flexboxfroggy.

flex-flow: column wrap;
justify-content: center;
align-content: space-between;
transform: scale(-1, -1);

Upside down 🐸 working too 😜

from flexboxfroggy.

Solve them all!
Very nice play with the frogs.
These ex will be played plenty of times

from flexboxfroggy.

Also, it wouldn't hurt to have a little buildup combining a few of the concepts before the final one - including one or two that combine order with things like flex-wrap.

from flexboxfroggy.

24 seems ok, for me.

from flexboxfroggy.

@ghost thanks for the solution. I was not able to find it by myself.

Not sure to understand why is it the solution... Maybe provide solution with explanations could be useful in the game

from flexboxfroggy.

Besides the wrap-reverse, the true value of level 24 is I now know that with one class, you can do so much..... Otherwise, I will apply other class for the children.haha. Really thanks.

from flexboxfroggy.

I agree that level 24 is pretty tough, but I intended it to be like that to give the opportunity to play around with all of the properties one last time, and as a "boss level" final challenge to add a sense of accomplishment.

I like the concept of having a boss level, but I think there need to be just a few free-form exercises leading up to it.

from flexboxfroggy.