Skip to content

基础部分

Level 1

欢迎来到 Flexbox Froggy,这是个通过编写 CSS 代码来帮助青蛙和它的朋友们的游戏。使用 justify-content 样式来引导青蛙到右侧的睡莲。

justify-content 用来设置元素的水平排列顺序,它接收以下值:

  • flex-start: 元素在容器中居左排列

  • flex-end: 元素在容器中居右排列

  • center: 元素在容器中居中排列

  • space-between: 元素之间间距相等

  • space-around: 元素周围间距相等

例如, justify-content: flex-end 将会移动青蛙到右侧.

alt text

ANSWER

css
#pond {
    display: flex;
    justify-content: flex-end; 
}

Level 2

再一次使用 justify-content 帮助这两个青蛙到它们各自的睡莲上。

再来温习一下它的属性值:

  • flex-start: 元素在容器中居左排列

  • flex-end: 元素在容器中居右排列

  • center: 元素在容器中居中排列

  • space-between: 元素之间间距相等

  • space-around: 元素周围间距相等

alt text

ANSWER

css
#pond {
    display: flex;
    justify-content: center; 
}

Level 3

使用 justify-content 帮助全部三只青蛙到达各自的睡莲上,这次睡莲在各自的周围有相同的间距。

在本游戏中,如果你忘记了属性值,你可以点击对应的属性名来查看。试一下点击 justify-content

你可以在原网站中点击,这个笔记中不让点(因为不好做)。

alt text

ANSWER

css
#pond {
    display: flex;
    justify-content: space-around; 
}

Level 4

这次位于边上的睡莲飘到了对岸,增加了之间的间距。使用 justify-content,让睡莲之间具有相等的间距。

alt text

ANSWER

css
#pond {
    display: flex;
    justify-content: space-between; 
}

Level 5

使用 align-items 帮助青蛙到达池塘底部。这个 CSS 属性可以使元素纵向排列,它接收如下值:

  • flex-start: 元素在容器顶部排列
  • flex-end: 元素在容器底部排列
  • center: 元素在容器内纵向居中排列
  • baseline: 元素在容器的基线上显示
  • stretch: 元素被拉伸以适配容器

alt text

ANSWER

css
#pond {
    display: flex;
    align-items: flex-end; 
}

Level 6

justify-contentalign-items 组合起来使用,带领青蛙到达池塘中央。

alt text

ANSWER

css
#pond {
    display: flex;
    justify-content: center;    
    align-items: center;        
}

Level 7

青蛙们需要再穿越一次池塘,这次睡莲周围有足够的间隙。同时使用 justify-contentalign-items 来帮助青蛙们吧。

alt text

ANSWER

css
#pond {
    display: flex;
    justify-content: space-around;  
    align-items: flex-end;          
}
评论区
评论区空空如也
发送评论
名字
0 / 20
邮箱
0 / 100
评论内容
0 / 140
由于是非实名评论,所以不提供删除功能。如果你需要删除你发送的评论,或者是其他人的评论对你造成了困扰,请 发邮件给我 。同时评论区会使用 AI + 人工的方式进行审核,以达到合规要求。

© thebestxt.cc
辽ICP备16009524号-8
本站所有文章版权所有,转载请注明出处