玩着游戏就把前端知识学了,贼爽!!!
今天发现了一篇牛掰的文章(https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f),讲述了12款学习CSS的游戏,真可谓是玩着游戏就把前端CSS知识点学废了,是不是很激动,有种跃跃欲试的感觉?由于游戏太多,我没有一一进行通关,下面讲述自己通关的那款游戏——Flexbox Defense(http://www.flexboxdefense.com/)。
欢迎和号主【前端点线面】进群盘算法,此外本号干货满满:14个门类(100+篇原创)内容(又干又硬)、《前端百题斩》pdf(助力薪资double)、20+篇思维导图(知识系统化、记忆简单化),进摸鱼群。
一、基础知识
这是一款塔防类游戏,有点像保卫萝卜,该款游戏共12个关卡,为了通关需要了解Flex布局的一些知识,下面就来简单科普一下需要用到的小知识点【注:本文仅科普需要用到的知识点,更加详细的可看官方文档】。
1.1 justify-conent
justify-content
属性定义了项目在主轴上的对齐方式。
flex-start
(默认值):左对齐flex-end
:右对齐center
:居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
1.2 align-items
align-items
属性定义项目在交叉轴上如何对齐。
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
1.3 flex-direction
flex-direction
属性决定主轴的方向(即项目的排列方向)
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。
1.4 order
order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
1.5 align-self
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
二、游戏攻略
基础知识已经储备完毕,下面就靠这些三板斧进行通关操作了,一言不合就是砍。
2.1 关卡1
用justify-content就可以解决。
2.2 关卡2
用justify-content就可以解决。
2.3 关卡3
用justify-content就可以解决。
2.4 关卡4
用align-items就可以解决。
2.5 关卡5
用justify-content、align-items就可以解决。
2.6 关卡6
用justify-content、align-items就可以解决。
2.7 关卡7
用flex-direction就可以解决。
2.8 关卡8
用flex-direction、align-items就可以解决。
2.9 关卡9
这个关卡增加了新的武器——散弹炮,这个位置千万要注意,此关卡用flex-direction、justify-content、align-items就可以解决。
2.10 关卡10
用justify-content、order就可以解决。
2.11 关卡11
用justify-content、align-self就可以解决。
2.12 关卡12
用flex-direction、justify-content、align-self、order就可以解决。
··············· 执鸢者简介 ·················
看号主详细信息,来这
瞅一瞅
畅所欲言交流群
【1】前端百题斩系列
【2】Vue系列
【3】React系列
【4】前端基础系列
【5】基础知识
【6】浏览器系列
【7】构建工具系列
【8】网络系列
【9】Node系列
【10】源码系列
【11】前端有意思
【12】手撕算法系列
【13】个人总结
【14】杂科
玩着游戏就把前端知识学了,贼爽!!!相关推荐
- Web前端要学什么语言?需掌握哪些知识?
近几年随着IT行业的发展,出现了许多之前大家不知道和不了解的新技术.新岗位,Web前端开发就是其中之一.并且,在互联网快速发展的大环境下,这类专业技术人才需求越来越大,相对应所提供的薪酬待遇也在不断上 ...
- Web前端主要学什么?这些知识要掌握
Web前端主要学什么?是很多初学Web前端学员都会问到的问题,毕竟近些年来Web开发变化巨大,从简单网页脚本开发语言到开始染指后端服务器开发各种库插件多如牛毛,几乎无所不能.下面,小千就分享给大家We ...
- 重学前端----前端知识系统学习推荐专栏
推荐一个前端知识学习专栏.此专栏为极客时间收费专栏. 学习交流加 个人qq: 1126137994 个人微信: liu1126137994 学习交流资源分享qq群: 962535112 文章目录 1 ...
- 啊u学科学计算机,动画 | 《阿U学科学》:开学啦!在游戏中学习科学知识吧
原标题:动画 | <阿U学科学>:开学啦!在游戏中学习科学知识吧 一滴水中有多少奇妙的生命? 打哈欠会传染吗? 蜗牛也有左撇子? 动物自带指南针吗? 为什么日出和日落时的太阳是红色的? 当 ...
- 网站前端开发基础知识学什么?必备技能
网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...
- web前端需要学什么知识?自学要多久?
想学web前端需要学什么知识?htmlcss,css3,javascript,jQuery,easyUI,html5--首先学这些基本的吧!学习顺序就是HTML DIV_CSS javascript ...
- layui 如何动态加载局部页面_从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!
前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
- 玩转Vue3全家桶开篇词丨如何借助Vue3建构你的前端知识体系?
你好,我是盛鑫晶,网名大圣. 先简单介绍一下我自己,我曾经就职于百度和 360,最近几年从前端架构师转型做 IT 教育,现在是一名自由职业者.我也喜欢混迹开源社区,同时也是 Vue 3 的 Contr ...
- 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!
前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
最新文章
- (四)OpenStack---M版---双节点搭建---Glance安装和配置
- UPC个人训练赛第十五场(AtCoder Grand Contest 031)
- literature review and methodology
- IOS对plist配置文件的读写操作
- 如何形容自己的计算机水平,信息在计算机中的表示
- OpenCV 2 学习笔记(9): 定义ROI(regions of interest):给图像加入水印
- 我们注意到您的计算机目前处于离线状态_你为什么会选择用反渗透设备离线清洗设备?...
- android 中在CMD中查看sqlite
- 深圳爱思拓大数据 网站_建议收藏!13个大数据学习网站很少人知道!附大数据自学资料分享...
- 创建数据账号只有个别表的权限_只有普通权限账号,如何把远程数据库中该用户的数据表导入到本地数据库?...
- 静态NAT、动态NAT、PAT(端口多路复用)的配置
- 服务器虚拟盘怎么设置,服务器虚拟内存设置在什么盘
- ssa/ass字幕格式全解析
- 联想“重组症”:仅靠重组是不够的
- 补码乘法、booth算法、Wallace树
- 面向对象的编程(上)_方法的重载(overload)练习
- 幼儿-综合素质【8】
- Safari 浏览器插件(扩展)开发
- 点击选择-图片添加对号(单选)
- java浅谈线程安全之锁
热门文章
- 培训笔记之WIZnet的主要产品是什么?
- 浅谈api工厂:前端Paas中台
- #systemverilog# $time,$stime,$realtime的使用
- 高数下|全微分|高数叔|手写笔记
- Android Studio debug时Method breakpoints may dramatically slow down debugging,debug手机巨卡问题
- 经典| 单轨RGV环形穿梭车| 连续搬运
- html 整体变为灰色,网页图片变灰色的三种实现办法_html/css_WEB-ITnose
- MDD | 静电是如何损害电子元器件的
- 每周资讯1Min快速浏览
- 小哈机器人新年照片_“机器人太空之旅”欢庆元旦科普主题活动精彩回顾