FlexboxFroggy一个学flex布局的游戏, 它把学习代码变成了一种乐趣,学习flex布局可以跟玩一样,我亲自体验了一下,比起单纯的去学习flex的枯燥,这个确实更有趣。
Flexbox Froggy
欢迎来到Flexbox Froggy。在游戏中你会靠写CSS代码来帮助青蛙和他的朋友们!请用justify-content
属性指引青蛙到右边的荷叶上。这个属性可以水平对齐元素,并且接受以下几个参数:
-
flex-start
: 元素和容器的左端对齐。 -
flex-end
: 元素和容器的右端对齐。 -
center
: 元素在容器里居中。 -
space-between
:元素之间保持相等的距离。 -
space-around
:元素周围保持相等的距离。
举个例子,justify-content: flex-end;
会将青蛙移到右边