CSS-Flexbox青蛙回荷叶游戏-案例分析（青蛙回荷叶）

游戏最后一关，这款游戏是让不同颜色的青蛙回到相应颜色的荷叶上。

编程游戏链接：

Flexbox Froggy - 一个用来学CSS flexbox的游戏https://flexboxfroggy.com/#zh-cn

案例24

 要求你填写如下空白处的代码 ：

案例分析： 

首先，在通过前面23关的历练下，相信对这几个标签的属性和作用也有了一定的理解和应用，而在这个24关里是对前面所有属性的一个大整合。

已知，display是弹性布局。

分析，现在所有颜色的青蛙都在一行，毫无疑问我们要让青蛙换行，恰好换行后黄色的青蛙会落下来，此时我们就需要青蛙编程纵向排列，再调节间距布局就可以实现了。

 代码实现： 

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

flex-wrap: wrap-reverse

这个属性决定了flex容器中的子项是否应该换行显示，以及换行的方向。意味着如果子项的总大小超过了flex容器的主轴长度，子项将会换行显示，但是换行的方向是反向的。

flex-direction: column-reverse

这个属性定义了flex容器中子项的排列方向。意味着子项将沿着与常规列方向相反的方向排列，即从上到下变为从下到上。
justify-content: center

这个属性定义了如何沿着主轴分配flex容器中的子项之间的空间。意味着子项将在主轴上居中对齐。

align-content: space-between

这个属性定义了如何沿着交叉轴（与主轴垂直的轴）分配flex容器中的额外空间，并处理多行子项的对齐方式。意味着交叉轴上的额外空间会被平均分配到每行子项之间，但是交叉轴的两端不会有空间（即第一行子项贴近容器的开始边，最后一行子项贴近容器的结束边）。注意，这个属性仅在有多行子项且子项的总大小小于flex容器的大小时才有效。

效果展示： 

努力经营当下，直至未来明朗。