Solving Flexbox Froggy level 24

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

Here is my solution -
It's really easy, just some trial and error methods with the CSS will get you close to the solution.

Haha, I must say, the frog flipping with "transform" is pretty creative!

I did it with 3 lines, which is still valid :

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

BUT, you could also do it in this way if you must solve it in 4 lines:

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

"flex-flow" is basically a shortcut if you want to use flex-direction & flex-wrap at the same time :)

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

Here is my solution - It's really easy, just some trial and error methods with the CSS will get you close to the solution.

the same we are.

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

here's mine

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

It is valid! 😅

How did you get your frogs upside down lol

look at first and last line of code.

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

if you remove both -reverse in first line
and add

rotate: 180deg;

at the end you will achieve rotated valid solution

thanks a lot i missed the
align-content:space-between;

It is valid! 😅

😅😅😅😅

rotate: 180deg; lmao😅

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

rotate(90deg); 😅

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

Hello, my solution is:

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

Geez I am so brain dead. "justify-content: center" was my issue. I just had a typo and was getting frustrated because I was sure it would work.

My solution:

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

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

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

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

I am a newbie, I did not even knew about wrap-reverse.
I was thinking if there was a way to switch position between 2 line and even rechecked the order exercises in previous levels.
There should have at lest one exercise for wrap-reverse.

sir, my solution is here,

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

Haha, had to look up wrap-reverse since I hadn't learnt about it. Managed to figure out the rest.

Here's my code:
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-items: flex-end;
align-content: space-between;

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

You have to solve the problem only with the specified properties.

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

it took me some time. I was using align-self but I have to use align-content after analyzing finally I got it.
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
align-content: space-between;
justify-content: center;

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

Flexbox Properties Explanation

/* Setting flex-direction to column-reverse
   This makes the flex container's main axis vertical, and the flex items are arranged from the bottom to the top. */
flex-direction: column-reverse;

/* Setting flex-wrap to wrap-reverse
   This allows flex items to wrap onto multiple lines, but in reverse order (from bottom to top or right to left depending on flex-direction). */
flex-wrap: wrap-reverse;

/* Setting justify-content to center
   This centers the flex items along the main axis (vertical in this case due to column-reverse). */
justify-content: center;

/* Setting align-content to space-between
   This distributes flex lines evenly along the cross axis with space between them. */
align-content: space-between;

It is valid! 😅

How did you get your frogs upside down lol

😂😂😂😂😂 LOL
😂😂😂😂😂 LOL hhhhhh

At first I also forgot about the wrap-reverse but then I started rummaging at their CSS property descriptions and found out about the wrap-reverse thing.

(I read this only after solving this myself)

My solution!