[HTML/CSS] 플렉스 개구리 공략집( 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;

 

Finish!!