Flex练习-打游戏

引言：因为学了flex布局，但是不知道怎么使用，虽然知道做项目是很好的方式，但是还是不知道如何下手，所以就看看有没有合适的练手的习题

如果你是零基础，推荐先看看这个：Flex语法
如果你觉得学的还可以，但是不知道怎么去验证，这里就很适合你 flex练习网址:

可能会遇到的阅读障碍

properties 属性（复数）
cross axis 交叉轴
main axis 主轴
group items 项目（里面的东西）
group container 容器（外面的大盒子）
align 排列
evenly 均匀地

第1关：

主要介绍justify-content属性，以及如何游戏介绍

通关代码：

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

第2关

.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;
}

第3关

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

第4关

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

第5关

.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;
}

第6关

继续练习上面两个属性

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

第7关

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

第8关

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

第9关

这局尝试了三波才过去……

.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;
}

第10关

这一题答案不唯一……自由发挥

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

第11关

.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 {}

第12关

最后一关，利用所学的全部知识……

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

Flex练习-打游戏相关推荐

FLEXBOX FROGGY11-24level(flex布局小游戏)
FLEXBOX FROGGY11-24level(flex布局小游戏) FLEXBOX FROGGY11-24level(flex布局小游戏) level-11 使用 flex-direction 和 ...
flex布局——宝藏游戏FlexboxFroggy
最近我发现了一个宝藏游戏FlexboxFroggy,适合需要练习flex布局的小伙伴. 这个游戏大致规则就是利用flex布局里的属性,将青蛙移动到对应荷叶的位置就可以过关. 给大家示范一下比如这个关 ...
FlashBuilder(flex）webGame游戏前端开发
flex开发游戏,不同于开发网站,设计模式,程序架构,性能,资源优化! 需要注意的地方非常的多,特别是,重用率! 目前,比较主流的开发模式是: 一,美工设计PSD 二,前端切图三,导入flash制作 ...
flex布局青蛙游戏通关攻略
目录 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 01 02 03 04 05 06 07 08 09 10 11 12 13 1 ...
使用FLEX 和 Actionscript开发FLASH 游戏（一）
使用FLEX 和 Actionscript开发FLASH 游戏开始本系列包括1至10部分:使用FLEX开发游戏写自Matthew Casperson Casperson 2008年10月31日出 ...
[新闻资讯] 使用Flex和Actionscript开发Flash游戏——重复背景绘制
[新闻资讯] 使用Flex和Actionscript开发Flash游戏--重复背景绘制 Flex, Flash, Actionscript, 游戏, 开发资讯类型: 翻译来源页面: http:// ...
flex布局一行三个_CSS Flex布局
Flex之前在flex布局出现以前,css布局大致就以下几种布局: 主要使用: normal flow 正常流.文档流 float + clearfix position: relative + p ...
css flexbox模型_Flexbox-Ultimate CSS Flex速查表（带有动画图！）
css flexbox模型 This comprehensive CSS flexbox cheatsheet will cover everything you need to know to st ...
（待补充）CSS进阶--flex布局
目录 flex 之前 flex 来了基本概念 flex container 的六个属性 flex item 的六个属性例子参考 flex 之前我们用什么布局?主要使用 normal flow( ...

Flex练习-打游戏

第1关：

第2关

第3关

第4关

第5关

第6关

第7关

第8关

第9关

第10关

第11关

第12关

Flex练习-打游戏相关推荐

最新文章

热门文章