站长圈

CSS flex布局练习

  • 计算机/互联网
  • 来源:站长圈
  • 编辑:站长圈
  • 时间:2021-06-01 10:44
  • 阅读:520

flex布局练习

( 发现了一个有趣的网站,觉得还不错,记录下来推荐安利给大家,如果觉得自己flex布局不太熟练的话,可以来练习强化一下)

描述

  • 练习名字:Flexbox Defense

  • 练习地址:http://www.flexboxdefense.com/

  • 练习描述:是个塔防游戏,通过用css 利用flex布局操作炮台位置 达到练习flex布局 的效果;共12关。

  • 练习前必读:这个练习项目是对flex布局有点了解但用的很生疏的人群;如果对于flex布局完全不了解的,可以先去看 阮一峰 大佬关于flex的博客再来练习巩固,大佬博客地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

塔防游戏图片

(第一关) 图片如下

0.jpg

每一关的答案

(再备上贴心的参考答案,注意:答案不唯一)
先自己写,再看答案对比哦

  1. 第一关

.tower-group-1 {display: flex;justify-content:center;}

全选代码

复制

  1. 第二关

.tower-group-1 {display: flex;justify-content:flex-end;}.tower-group-2 {display: flex;justify-content:center;} .tower-group-3 {display: flex;justify-content:flex-end;}

全选代码

复制

  1. 第三关

.tower-group-1 {display: flex;justify-content:center;}.tower-group-2 {display: flex;justify-content:space-between;}

全选代码

复制

  1. 第四关

.tower-group-1 {display: flex;align-items:flex-end;}.tower-group-2 {display: flex;align-items:flex-end;}

全选代码

复制

  1. 第五关

.tower-group-1 {display: flex;justify-content:space-around;align-items:flex-end;}.tower-group-2 {display: flex;justify-content:center;}.tower-group-3 {display: flex;justify-content:center;align-items:center;}

全选代码

复制

  1. 第六关

.tower-group-1 {display: flex;justify-content:space-between;align-items:center;}

全选代码

复制

  1. 第七关

.tower-group-1 {display: flex;flex-direction:column;}.tower-group-2 {display: flex;flex-direction:column;}

全选代码

复制

  1. 第八关

.tower-group-1 {display: flex;flex-direction:column;}.tower-group-2 {display: flex;flex-direction:column;align-items:center;}

全选代码

复制

  1. 第九关

.tower-group-1 {display: flex;flex-direction:row-reverse;justify-content:space-around;}.tower-group-2 {display: flex;flex-direction:row-reverse;justify-content:space-around;align-items:center;}

全选代码

复制

  1. 第十关

.tower-group-1 {display: flex;justify-content:space-around;}.tower-1-1 {}.tower-1-2 {order:10;}.tower-1-3 {}.tower-group-2 {display: flex;justify-content:space-around;}.tower-2-1 {}.tower-2-2 {order:-1;}.tower-2-3 {}

全选代码

复制

  1. 第十一关

.tower-group-1 {display: flex;justify-content:space-between;}.tower-1-1 {align-self:flex-end;}.tower-1-2 {}.tower-1-3 {align-self:flex-end;}.tower-1-4 {}

全选代码

复制

  1. 第十二关

.tower-group-1 {display: flex;justify-content:space-between;align-items:center;}.tower-1-1 {align-self:flex-start;}.tower-1-2 {}.tower-1-3 {order:10;}.tower-1-4 {}.tower-1-5 {order:20;align-self:flex-end;}

全选代码

复制

目前共12关,答案不唯一,也许你写出来的比我的还要简单

(。・∀・)ノ゙ 如果觉得还不错 ,记得点赞 收藏,感谢 !前端的路上,我们一起加油 ( ̄︶ ̄*))


全部评论(0)
资讯详情页最新发布上方横幅
推荐阅读
  • ripro主题Logo加闪光效果
  • ripro主题Logo加闪光效果
  • 最近看到很多的网站LOGO都有个闪光的效果,怎么做的呢?小编也研究了下,适合所有网站,下面把代码分享给大家/*ZZHUTI网站LOGO 流光*/.logo-wrapper {    position: relative;    font-size:2em;    font-
  • 计算机/互联网
  • 来源:站长圈
  • 编辑:站长圈
  • 时间:2021-08-10 14:34
  • 阅读:643
  • 关于windows server2008r2激活密钥及激活的方法
  • 关于windows server2008r2激活密钥及激活的方法
  • Server2008r2激活密钥分两种,分别是server2008永久密钥和kms安装密钥其中server2008永久密钥有激活次数限制,可能失效。kms激活密钥是微软官方提供,没有激活次数限制,永久有效我选择没有限制次数的方法,即使用kms方式,我安装的是datacenter,激活时选择第五个windowsserver2008/R2批量授权版KMS安装密钥1、WindowsServer2008R2WindowsServe
  • 计算机/互联网
  • 来源:站长圈
  • 编辑:站长圈
  • 时间:2021-08-06 11:51
  • 阅读:596
  • AList 基于阿里云盘的个人网盘目录列表程序
  • AList 基于阿里云盘的个人网盘目录列表程序
  • 今天再给大家推荐一个利用阿里云盘来搭建的个人分享网盘程序!相对于Teambition 主要是利用Cookie模拟用户登陆,然后调用相关接口。本文代码使用的是标准的OAuth2实现接口的调用,相对来说更稳定一些!开源仓库原作者:https://github.com/Xhofe/alist下面的项目是博主为了部署方便整合了一个仓库,且支持了Docker部署!https://github.com/malaohu/alist-onec
  • 计算机/互联网
  • 来源:站长圈
  • 编辑:站长圈
  • 时间:2021-06-01 14:46
  • 阅读:868
  • php在线打包工具源码
  • php在线打包工具源码
  • 支持PHP5.6-PHP7。说明:点开始打包,之后,就是耐心等待打包完成了,根据网站文件多少,需要的时间可能会很长。打包完成之后,压缩包会存放在要打包的站点目录下,以打包时间+不定长随机字符串+jackfeng.zip这样命名,请登陆ftp后下载。
  • 计算机/互联网
  • 来源:站长圈
  • 编辑:站长圈
  • 时间:2021-06-01 14:44
  • 阅读:460
底部广告
网站首页  |   关于我们  |   广告合作  |   联系我们  |   隐私条款  |   免责声明  |   网站地图
CopyRight 2014-2024 站长圈 | ICP证:粤ICP备16065033号-15
联系客服
技术咨询 售前小郑 客服明明 联系客服
0769-33314958
手机版

扫一扫进手机版
返回顶部