Skip to content

Instantly share code, notes, and snippets.

@lukasrudnik
Created May 30, 2017 08:31
Show Gist options
  • Save lukasrudnik/c72cafebd0db5bae4aa5563b24e73fd2 to your computer and use it in GitHub Desktop.
Save lukasrudnik/c72cafebd0db5bae4aa5563b24e73fd2 to your computer and use it in GitHub Desktop.
Solutions Flexbox Froggy
1) justify-content: flex-end;
2) justify-content: center;
3) justify-content: space-around;
4) justify-content: space-between;
5) align-items: flex-end;
6) align-items: center;
justify-content: center;
7) justify-content: space-around;
8) flex-direction: row-reverse;
9) flex-direction: column;
10) flex-direction: row-reverse;
justify-content: flex-end;
11) flex-direction: column;
justify-content: flex-end;
12) flex-direction: column-reverse;
justify-content: space-between;
13) flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;
14) order: 1;
15) order: -3;
16) align-self: flex-end;
17) align-self: flex-end;
order: 1;
18) flex-wrap: wrap;
19) flex-direction: column;
flex-wrap: wrap;
20) flex-flow: column wrap;
21) align-content: flex-start;
22) align-content: flex-end;
23) flex-direction: column-reverse;
align-content: center;
24) flex-flow:column-reverse wrap-reverse;
justify-content:center;
align-content:space-between;
@NgZhaoXian
Copy link

flex-direction: column-reverse;
align-content: center;

@DianaAndreeva
Copy link

i didn`t understend some of these things and then on the lvl 24 i was dead.

@Ranjan4Kumar
Copy link

Only level 24 is good one:- flex- flow: column-reverse wrap-reverse;
justify-content:center;
align-content: space-between;

@Azamkhan69939
Copy link

24 level solution.
flex-wrap: wrap-reverse;
flex-direction:column-reverse;
justify-content:center;
align-content:space-between

@mavargasa
Copy link

19 flex-flow: wrap column-reverse

@parthupadhyayy
Copy link

👍🏼

@Anidharadini
Copy link

13?

@CuttleFishJones865
Copy link

I assumed that they were going to do align-self for the yellow frogs on level 24. Eh, oh well.

@MaheshKunde
Copy link

12?

@YoussefXAhmed
Copy link

thank you brother, i still 30 munites in 24

@amolbachhav2003
Copy link

i didn`t understend some of these things and then on the lvl 24 i was dead.

same here bro we both are beginners that's why😂

@Inder782
Copy link

Inder782 commented Oct 7, 2023

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

@najamshah25
Copy link

Not gonna lie they had me in align-content and first half of 24

@Grace128pan
Copy link

24 level solution. flex-wrap: wrap-reverse; flex-direction:column-reverse; justify-content:center; align-content:space-between

thanks,

@Kiran-pro2001
Copy link

Thanks, I got stuck to three questions. Now it is clear

@AnshikaGupta11
Copy link

why order is 1 in 17 question?

@Gachie689
Copy link

please can someone answer level 10 for me

@saiwebpro
Copy link

What's the use of sharing the answers, If we could spend 1-2 minutes on each questions, we could easily solved, and yes if i copy all these then what's the point of learning flex?

@peddikarthi
Copy link

thanks for the answers dude..! it helped me a lot

@impesantez
Copy link

24 was definitelat tricky!!

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