FLEXBOX FROGGY在线地址:Flexbox Froggy - A game for learning CSS flexbox。
先来看一下最后一关是什么样子:
- 首先可以看到青蛙是横着进行排列,所以先把排列顺序变成竖的。即 flex-direction:column-reverse;
- 设置 flex-wrap: wrap-reverse;
- 设置 justify-content: center;
- 设置 align-content: space-between;
来看下最后结果吧!!
来看下最后结果吧!!