Flex Box Froggy (http://www.flexboxfroggy.com) level 24 answer

flexboxfroggy.css

#pond {
  display: flex;
  flex-flow: column-reverse wrap-reverse;
  justify-content: center;
  align-content: space-between;
}

For greater challenge, try Flex Box Froggy No hints

Jeez. Took me a while. Couldn't figure it out. Got the right side to work, but couldn't get the 2 yellow frogs to get to the left. Never occurred to me to use justify content: center. Still trying to wrap my head around it (no pun intended).

Damn! I was so close, I just needed to add the "-reverse" to wrap :/
But I totally forget about that :(

I had a different solution that worked for me of
#pond {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between; 
}
I was also having a hard time getting the 2 yellow frogs to line up in their lily pads! Finally got it after the help of this forum. Thanks!

Fortunately,

#pond {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;
}

This also worked for me!

wow, great to know you guys are using this. It was a note for a student at the time, lol. Nice solutions

I had a different solution that worked for me of
#pond {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;
}
I was also having a hard time getting the 2 yellow frogs to line up in their lily pads! Finally got it after the help of this forum. Thanks!

As it says in that froggy tutorial:

flex-direction: column-reverse;
flex-wrap: wrap-reverse;

is the same than
flex-flow: column-reverse wrap-reverse;

That's why you can write both and works.

Thank you guys. The below solution worked. Didn't think to use space-between but it makes sense.

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

i wasn't aware of "wrap-reverse" property. so i solved it using transform,

transform: rotate(90deg);
flex-flow: row-reverse wrap;
justify-content: center;
align-content: space-between;