[CSS] Flexbox Froggy 솔루션

Flexbox Froggy란 ?

CSS 코드 게임으로 지시사항에 맞게 개구리들을 연잎으로 이동시켜주는 Flexbox 학습게임이다.

flexbox의 개념을 쉽게 배울 수 있다. 가끔 CSS 만진지 너무 오래되어서 Flex 개념이 가물가물할 때 한 번씩 풀어보곤 한다!

여러분도 게임으로 Flex 쉽게 배워보세요😊

 

🐸 Flexbox Froggy로 이동 🐸

Flexbox Froggy

 

✨ 1~5번 답 공유

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~10번 답 공유

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:left;

 

 

✨11~15번 답 공유

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: 2;

 

15번

order:-3;

 

 

✨11~15번 답 공유

16번

align-self: flex-end;

 

17번

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

 

18번

flex-wrap: wrap;

 

19번

flex-direction: column;
flex-wrap: wrap;

 

20번

flex-flow : column wrap;

 

 

✨21~24번 답 공유

21번

align-content: flex-start;

 

22번

align-content:flex-end;

 

23번

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

 

24번

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