Skip to content

Instantly share code, notes, and snippets.

@lucprincen
Last active May 14, 2024 15:18
Show Gist options
  • Save lucprincen/9548ab19bfc34f10ef8a to your computer and use it in GitHub Desktop.
Save lucprincen/9548ab19bfc34f10ef8a to your computer and use it in GitHub Desktop.
flex-flow:column-reverse wrap-reverse;
justify-content:center;
align-content:space-between;
@ubongn
Copy link

ubongn commented Oct 16, 2023

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

@sameerkali
Copy link

That's my solution

image

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

@sameerkali
Copy link

It is valid! 😅
Scherm­afbeelding 2023-08-02 om 15 56 50

How did you get your frogs upside down lol

😂😂😂😂😂 LOL

@tejalbangali
Copy link

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

Screenshot 2023-10-27 171954

@skyisnotthelimit-fr
Copy link

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

@Halcyon666
Copy link

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

Screenshot 2023-10-27 171954

IMG_0313

the same we are.

@yoyford
Copy link

yoyford commented Feb 10, 2024

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

here's mine

@sayak2k1maruti
Copy link

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

@termos22
Copy link

It is valid! 😅
Scherm­afbeelding 2023-08-02 om 15 56 50

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

@shaeakh
Copy link

shaeakh commented Mar 10, 2024

thanks a lot i missed the
align-content:space-between;
Screenshot (24)

@mukarramjavid
Copy link

It is valid! 😅

Scherm­afbeelding 2023-08-02 om 15 56 50

😅😅😅😅

@linj121
Copy link

linj121 commented Mar 29, 2024

rotate: 180deg; lmao😅

@kt-anas
Copy link

kt-anas commented May 7, 2024

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

@omidAkharbin
Copy link

rotate(90deg); 😅
frogy

@nknaleena101
Copy link

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

@NatMat250
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment