http://flexboxfroggy.com/ 접속하면 1단게부터 24단게 까지 게임을 통해서 flexBox 레이아웃을 연습할 수 있다.  

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. 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. justify-content:center;

     flex-direction:row-reverse;

     align-items:flex-end;

14. order:1;

15. order:-3;

16. align-self:flex-end;

17. order:2;

     align-self:flex-end;

18. flex-wrap:wrap;

19. flex-wrap:wrap;

     flex-direction:column;

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-direction:column-reverse;

      flex-wrap:wrap-reverse;

      align-content:space-between;

      justify-content:center;



블로그 이미지

클라인STR

,