CSS flex 布局小游戏

Flex Forggy 小游戏闯关记录

虽然是把关给闯完了，但学的还是很懵逼，没有系统性的思路，还是需要系统性的把flex布局看一遍，这个小游戏可以检测一下自己的flex布局学的是否过关,我把自己闯关的代码放在上面

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

网站的地址:Flex Forggy
相关图片参考