前端flex布局小游戏答案公布

古楼的双姑娘
636 阅读8分钟

1.游戏名称

2.游戏目的，可以练习什么

3.好玩不

4.答案是啥

Flexbox Froggy 这个是游戏的名称 这个是游戏的地址 flexboxfroggy.com/

第一道题

欢迎来到Flexbox Froggy。在游戏中你会靠写CSS代码来帮助青蛙和他的朋友们！请用justify-content属性指引青蛙到右边的荷叶上。这个属性可以水平对齐元素，并且接受以下几个参数：

  • flex-start: 元素和容器的左端对齐。
  • flex-end: 元素和容器的右端对齐。
  • center: 元素在容器里居中。
  • space-between:元素之间保持相等的距离。
  • space-around:元素周围保持相等的距离。

举个例子，justify-content: flex-end;会将青蛙移到右边。

image.png

代码

image.png

完成后是这样的

image.png

第二道题

再用justify-content一次来帮助这些青蛙到他们的荷叶上。记住这个CSS属性能水平对齐元素，并接受这些参数：

  • flex-start: 元素和容器的左端对齐。
  • flex-end: 元素和容器的右端对齐。
  • center: 元素在容器里居中。
  • space-between:元素之间保持相等的距离。
  • space-around:元素周围保持相等的距离。

image.png

代码

image.png

完成效果

image.png

第三道题

仅靠justify-content来帮助全部三只青蛙找到他们的荷叶。这次荷叶周边都有很多的空地。

如果你忘了一个CSS属性可选的值的话，你可以将鼠标移到参数名上面来查看。试试将鼠标移到justify-content。

image.png

代码 image.png

完成的效果 image.png

第四道题 现在边上的荷叶都漂到了岸上，使得他们之间的间距变大了。使用justify-content。这次荷叶之间有相等的距离。

开始的样子

image.png 代码

image.png 完成效果

image.png

第五道题

现在用align-items来帮助青蛙们到池塘的底部。这个CSS属性纵向对齐元素并且可选以下几个值：

  • flex-start: 元素与容器的顶部对齐。
  • flex-end: 元素与容器的底部对齐。
  • center: 元素纵向居中。
  • baseline: 元素在容器的基线位置显示。
  • stretch: 元素被拉伸以填满整个容器。

开始的样子

image.png

代码

image.png 完成的效果

image.png

第六道题

使用justify-content和align-items的组合来指引青蛙们到池塘中央。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第七道题

这些青蛙又需要穿过池塘了。这次有些荷叶周围有充足的距离。用justify-content和align-items的组合。

开始的样子

image.png

代码

image.png 完成的效果

image.png

第八道题

青蛙们需要和他们的荷叶保持对应的顺序。我们可以用flex-direction属性。这个CSS属性定义了元素在容器里摆放的方向，并且接受这些值：

  • row: 元素摆放的方向和文字方向一致。
  • row-reverse: 元素摆放的方向和文字方向相反。
  • column: 元素从上放到下。
  • column-reverse: 元素从下放到上。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第九道题

使用flex-direction属性，帮助青蛙们找到它们该去的列。这个CSS属性定义了元素在容器里摆放的方向，并且接受这些值：

  • row: 元素摆放的方向和文字方向一致。
  • row-reverse: 元素摆放的方向和文字方向相反。
  • column: 元素从上放到下。
  • column-reverse: 元素从下放到上。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第十道题

帮助青蛙们回到它们的荷叶上。尽管它们看上去离的很近，需要用flex-direction和justify-content来帮它们到那里。

注意当你调转行或列的方向后，flex-start和flex-end对应的方向也被调转了。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第十一道题

用flex-direction和justify-content来帮助青蛙找到他们的方向

注意当flex以列为方向时，justify-content控制纵向对齐，align-items控制横向对齐。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第十二道题

用flex-direction和justify-content来帮助青蛙回到他们的荷叶上。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第十三道题

用flex-direction，justify-content以及align-items来帮助青蛙回到他们的荷叶上。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第十四道题

有时候仅仅调转行或列的方向是不够的。在这些情况，我们可以设置单个元素的order属性。元素的属性默认值为0，但是我们设置这个属性为正数或负数。

用order来调整青蛙的顺序。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第十五道题

用order属性来把红青蛙送回它的荷叶去。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第十六道题

另一个你可以使用的控制单个元素的属性是align-self。这个属性接受和align-items一样的那些值。

开始的样子 image.png

代码

image.png

完成的效果

image.png

第十七道题

用order和align-self的组合来帮助青蛙们到它们的目的地。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第十八道题

哦不！这些青蛙都挤到一行了。用flex-wrap属性把它们分散看看。这个属性接受这些值：

  • nowrap: 所有的元素都在一行。
  • wrap: 元素自动换成多行。
  • wrap-reverse: 元素自动换成逆序的多行。

开始的样子

image.png 代码

image.png

完成的效果

image.png

第十九道题

帮这些青蛙们排成整齐的三列。使用flex-direction和flex-wrap的组合。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第二十道题

flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。

举个例子，你可以用flex-flow: row wrap去设置行并自动换行。

试着用flex-flow来重复上一关的任务。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第二十一道题

青蛙们在池塘里到处都是，然而荷叶都在顶部。你可以使用align-content来决定行与行之间隔多远。这个属性接受这些值：

  • flex-start: 多行都集中在顶部。
  • flex-end: 多行都集中在底部。
  • center: 多行居中。
  • space-between: 行与行之间保持相等距离。
  • space-around: 每行的周围保持相等距离。
  • stretch: 每一行都被拉伸以填满容器。

这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第二十二道题

现在水流把荷叶都推到底部了。用align-content来指引青蛙到那里。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第二十三道题

青蛙们开完了派对，现在该回家了。用flex-direction和align-content的组合来把它们带回各自的家。

开始的样子

image.png

代码

image.png

完成的效果

image.png

第二十四道题

用这些你所学的CSS属性，最后一次把青蛙们带回家:

  • justify-content
  • align-items
  • flex-direction
  • order
  • align-self
  • flex-wrap
  • flex-flow
  • align-content

开始的样子

image.png

代码

image.png

完成的效果

image.png

总结

  1. justify-content ===> 水平对齐元素
  • flex-start: 元素和容器的左端对齐。
  • flex-end: 元素和容器的右端对齐。
  • center: 元素在容器里居中。
  • space-between:元素之间保持相等的距离。
  • space-around:元素周围保持相等的距离。
  1. align-content ===> 负责column这个方向的显示情况
  • flex-start: 元素与容器的顶部对齐。
  • flex-end: 元素与容器的底部对齐。
  • center: 元素纵向居中。
  • baseline: 元素在容器的基线位置显示。
  • stretch: 元素被拉伸以填满整个容器。
  1. flex-direction ===> 元素在容器里摆放的方向
  • row: 元素摆放的方向和文字方向一致。
  • row-reverse: 元素摆放的方向和文字方向相反。
  • column: 元素从上放到下。
  • column-reverse: 元素从下放到上。

  1. order ===> 元素的属性默认值为0,但是我们设置这个属性为正数或负数

  2. align-self ===> 控制单个元素的属性

  • flex-start: 元素与容器的顶部对齐。
  • flex-end: 元素与容器的底部对齐。
  • center: 元素纵向居中。
  • baseline: 元素在容器的基线位置显示。
  • stretch: 元素被拉伸以填满整个容器。
  1. flex-wrap ===>
  • nowrap: 所有的元素都在一行。
  • wrap: 元素自动换成多行。
  • wrap-reverse: 元素自动换成逆序的多行。
  1. align-items ===> 纵向对齐元素
  • flex-start: 元素与容器的顶部对齐。
  • flex-end: 元素与容器的底部对齐。
  • center: 元素纵向居中。
  • baseline: 元素在容器的基线位置显示。
  • stretch: 元素被拉伸以填满整个容器。
  1. 注意当flex以列为方向时，justify-content控制纵向对齐，align-items控制横向对齐。
avatar
文章
阅读
粉丝