플렉스 개구리 공략집( Flexbox Froggy Solutions )

Front-End 개발을 해보신 분이라면 한번쯤은 들어보셨을 수도 있는 (제가 푼) 플렉스 개구리(https://flexboxfroggy.com/#ko)의 공략집 입니다. 공략을 보지 않고도 충분히 해결할 수 있지만, 해답이 먼저 궁금하신 분들은 참고해 보신 다음, 따라 해 보면 도움되실 것 같습니다.

 

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 단계. 

해답 :

justify-content: center;
align-items: center;

7 단계. 

해답 : 

justify-content: space-around;
align-items: flex-end;

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;
align-items: flex-end;
justify-content: center;

14 단계. 

해답 :

order: 1;

15 단계. 

해답 :

order: -1

16 단계. 

해답 :

align-self: flex-end;

17 단계. 

해답 :

order: 1;
align-self: flex-end;

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;

ENDING