页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

一个学flex布局的游戏FlexboxFroggy

布局 HTML我帮您 2月前  次浏览

FlexboxFroggy一个学flex布局的游戏, 它把学习代码变成了一种乐趣,学习flex布局可以跟玩一样,我亲自体验了一下,比起单纯的去学习flex的枯燥,这个确实更有趣。

一个学flex布局的游戏FlexboxFroggy


Flexbox Froggy

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

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

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



相关链接

发表评论