[CSS_Flexbox] Flexbox를 게임으로 배워보자 - Flexbox Froggy 소개 & 정답

Flexbox Froggy 소개

 

CSS에서 유용하게 사용할 수 있는 Flexbox!

 

게임 플레이 화면

 

이를 게임으로 더욱 재미있게 배울 수 있습니다.

Flexbox Froggy라는 게임 사이트인데요. flexbox를 사용하여 개구리들을 옮기는 게임입니다. 물론 무료구요. 한국어로도 이용이 가능하며 설명 또한 자세하게 적혀있어 flexbox를 공부할 때 도움이 많이 되는 사이트입니다.

아래에 링크를 남겨 놨으니 한 번 방문하셔서 즐겨보시길 바랍니다.

 

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

총 24단계로 구성 되어있습니다.

정답도 같이 남기니 필요하신 분들은 참고해주시면 감사하겠습니다.

 

 

---

 

Flexbox Froggy 정답

 

빠른 정답이동

 

• 단계 1
• 단계 2
• 단계 3
• 단계 4
• 단계 5
• 단계 6
• 단계 7
• 단계 8
• 단계 9
• 단계 10
• 단계 11
• 단계 12
• 단계 13
• 단계 14
• 단계 15
• 단계 16
• 단계 17
• 단계 18
• 단계 19
• 단계 20
• 단계 21
• 단계 22
• 단계 23
• 단계 24

 

---

 

 

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

 

 

 

단계 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: wrap column;

 

 

 

단계 21

 

 

align-content:flex-start

 

 

 

단계 22

 

align-content:flex-end;

 

 

 

단계 23

 

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

 

 

 

단계 24

 

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