一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。
昨天好好梳理了下flexbox的知识点，赶紧找找题目练习。 找到一个在线小游戏，可以用于巩固flexbox基础。 记录下通关过程，同时再做下小结。 算是复习了。
游戏背景
游戏地址：flexboxfroggy.com/
游戏玩法：通过修改flexbox的属性值，使青蛙移动到与其同色的荷叶上。
如果成功，红色按钮next会被激活，此时可以挑战下一关。
游戏一共24关。
游戏挺简单的，能巩固对几个基础属性的理解。
比较可惜的是，没有flex-shrink，flex-basis，flex-grow的相关练习。
下面是24个关卡的通关记录。
1/24
题目：
解析：默认按行排列，使用justify-content确定排布起始位置。
解法：
2/24
题目：
解析：默认按行排列，使用justify-content确定排布起始位置。
解法：
3/24
题目：
解析：
解析：默认按行排列，使用justify-content确定排布起始位置。
解法：
4/24
题目：
解析：
默认按行排列，使用justify-content确定排布起始位置。
3，4两题可以帮助区分space-around和space-between。
解法：
5/24
题目：
解析：
默认按行排列，使用justify-content确定排布起始位置。
解法：
6/24
题目：
解析：
flexbox的元素居中排列要怎么做，修改主轴和交叉轴的起始排布位置。
解法：
7/24
题目：
解析：主轴上均匀间隔（首尾不空），交叉轴居于底部。
解法：
8/24
题目：
解析：
主轴上从结束点向起始点排布。
解法：
9/24
题目：
解析：
按列排布
解法：
10/24
题目：
解析：
先顶到行末，再逆序排布。
解法：
11/24
题目：
解析：
先按列排布，再顶到尾部。
解法：
12/24
题目：
解析：
主轴按列逆序排布，同时均匀排布（首尾不占空间）
解法：
13/24
题目：
解析：
主轴（行）：逆序，居中，交叉轴（列）置于尾部。
解法：
14/24
题目：
解析：
将黄色蛙排到最后，修改其顺序。放到最后面。值为最大值。
解法：
15/24
题目：
解析：
将红色蛙提到最前面。改变顺序，修改为最小值。默认为0.
解法：
16/24
题目：
解析：
只修改黄色蛙在交叉轴上的排布方式，使之处于尾部。
修改覆盖对所有元素在交叉轴上的配置。使用align-self。
解法：
17/24
题目：
解析：
主轴方向，通过修改黄色蛙的order使之排到行末，交叉轴方向，使之排到底部。
解法：
18/24
题目：
解析：
元素项换行，使之不压缩。
解法：
19/24
题目：
解析：按列换行。先改为按列排布，后选择换行。
解法：
20/24
题目：
解析：
属性简写。flex-flow合并flex-direction和flex-wrap。
解法：
21/24
题目：
解析：主轴溢出，在交叉轴延伸布局，用align-content修改在元素在交叉轴上间距。
在本题里，按行排列，换行后，调整行间距，或者说是整个容器的排布方式。按照在垂直方向从上到下分布。
解法：
22/24
题目：
解析：整体压到底部排列。
解法：
23/24
题目：
解析：改变主轴和交叉轴方向，且逆序排布；同时整体居中排布。
解法：
24/24综合应用
题目：综合利用前面所学的知识，利用所给的属性，自由组合，使青蛙移动到相同颜色的荷叶上。
分析：
最后一题较难，是对前面23题几个属性的综合应用。
另人开心的是，在左侧输入代码时，右侧会实时显示青蛙的位置变化，所以其实也不算太难。
可以看到是按列排布，且有换行，而且顺序都反了。同时整个容器是往水平两边靠，同时换行溢出的元素是居中排布。
解法：
小结
1.注意主轴和交叉轴，主轴确定后，交叉轴为垂直方向，使用flex-direction确定主轴
2.默认情况，元素项不换行，所以如果元素总和超出容器大小，会自动进行缩放，此时可设置flex-wrap，使元素项在交叉轴上进行排布。
3.order可以更改元素相的排布顺序，可手动实现逆序排布，也可单独将某个元素放置到最前面或最末尾。
4.对于某个单独的元素，可单独设置其在交叉轴上的布局方式，即align-self，此时会覆盖align-items属性的值。
5.justify-content配置主轴排布方式，align-items配置交叉轴排布方式。
6.align-content，是当元素相溢出在交叉轴排布时，可设置容器的对齐方式。
7.属性值为space-aroud和space-between的区别在于，spac-between首尾两个元素项会贴边排布，在对应轴上不占用空间。
ps：可以研究下这个游戏是怎么实现的，考虑增加flex-shrink，flex-basis，flex-grow的练习。
通关后，可以看到相关游戏，可以继续玩。
这里可以看到更多游戏：codepip.com/
这里是项目源码地址：github.com/thomaspark/…
