Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flex Box Froggy (http://www.flexboxfroggy.com) level 24 answer
#pond {
display: flex;
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;
}
@christianrubiales

This comment has been minimized.

Copy link

commented May 7, 2017

For greater challenge, try Flex Box Froggy No hints

@AgeelWebDev

This comment has been minimized.

Copy link

commented Oct 24, 2017

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

@thegreatgatsby1

This comment has been minimized.

Copy link

commented Jul 7, 2018

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

@SamanthaSiebert

This comment has been minimized.

Copy link

commented Mar 25, 2019

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!

@adej0

This comment has been minimized.

Copy link

commented Jun 10, 2019

Fortunately,

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

This also worked for me!

@sgnl

This comment has been minimized.

Copy link
Owner Author

commented Jun 10, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.