本文为游玩Play Flex时顺手写的,目的为省去以后想回顾下再玩游戏的时间.
目录
故事背景:
主角团人物介绍:
Arthur 
"Marilyn
概念引入:
CSS中 display:flex; 的元素我们称之为容器;
容器中的块,我们称为项目 item;
我们放置的块,如div, 默认都是横向排列的,我们称这个方向为 主轴
对应的主轴交叉方向的轴就是侧轴;
通过 flex-direction:row / column / row-reverse / column-reverse 可以调整主轴的方向
接下来游戏需要什么代码,我们再拓展代码介绍
justify-content 则是 调整主轴方向内容 布局的代码;
游戏介绍:
该游戏的 #field{ } 为 主角所在地图这个大盒子的id,通过在里边写css代码,来控制主角和其队友在地图中的位置,将主角和其队友等移动到游戏要求的位置即算成功.
关卡
前边几关需要用到的代码:
Justify-content
justify-content:flex-start(默认) / center / flex-end / space-between / space-around / space-evenly;
Notice:
- 当容器中主轴方向上存在剩余空间时, 该属性才有意义
Level 1 亚瑟王状态不满,需要吃些许苹果充饥回血
justify-content:center;
Level 2
justify-content:felx-end;
Level 3 亚瑟王获得伙伴一枚
justify-content:space-between; 参考word的两端对齐
Level 4
justify-content:space-around; 类似于这个骑士和法师左右有同样的 marging. 且分配完后恰好他俩会平分这个容器的宽度. 多个的情况下也类似.
Level 5
justify-content:space-evenly; 间距绝对的公平!
接下来要用到的代码:
Align-items
align-items: flex-start(默认) / flex-end / center / baseline /stretch (标灰的游戏没用,但我会介绍)
Notice:
- 该属性仅适用于: 单行容器
- 当容器中交叉轴方向上存在剩余空间时, 该属性才有意义
Level 6 亚瑟王又添一干将
align-items:center;
Level 7
align-items:flex-end;
Level 8
(混合使用justify-content和align-items)
align-items:center;
justify-items:center;
Level 9
分析:主轴方向内容呈现 space-between 分布, 侧轴 item 位于底部,则对应代码 align-items:flex-end;
justify-content:space-between;
align-items:flex-end;
代码引入:
Flex-direction
flex-direction:row(默认) → / column ↓/ row-reverse ← /column-reverse ↑
作用:改变主轴的方向;
Tip:改变主轴的方向,那么显示的顺序可能会发生变化,具体可看游戏;
Level 10
flex-direction:column;
Level 11
flex-direction:row-reverse;
Level 12
解释:首先将主轴方向切换为竖轴方向 ;其次要将内容向下移动,这个移动出现在主轴方向;且仅仅是平移;所以使用 justify-content:flex-end;
Level 13
主角要打大个,头孢要上红蜥蜴; 主轴方向仍然为row,但是要反向;故flex-direction:row-reverse;
内容在主轴方向和侧轴方向都居中; justify-content:center; align-items:center;
代码引入:
Order
order 属性规定弹性项目相对于同一容器内其余弹性项目的顺序。 注释： 如果元素不是弹性项目，则 order 属性无效。
Level 14
骑士刚才大战BOOS一场,吃点肉,需要到2号位
故在骑士的 id 下编写 CSS代码 order:2;
骑士现在到达2号位,吃到肉肉啦.
代码引入:
Align-self
align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。用法同align-items
注意：align-self 属性可重写灵活容器的 align-items 属性。
Level 15
法师打窟窿战士:
在法师的专属id里写CSS代码 : align-self:center;
Level 16
此处游戏要求使用order+align-self,此处给出两个解法;
order+align-self order:1; align-self:flex-end; (Game仅能用这个)
flex-direction+justify-content: flex-direction:column; justify-content:flex-end;
Level 17
主角打大BOOS, 法师打吸血鬼,此处代码如下:
逆向翻转主角团: flex-direction:column-reverse;
将主角团在主轴方向平移到另一边: justify-content:flex-end;
将主角团沿着侧轴方向移动到中间位置:align-items:center;
Level 18
主角打大BOOS
在主角id下写如下CSS代码:
order:2;
align-self:center;
代码引入:
Flex-wrap & align-content
- flex-wrap:nowrap (默认) / wrap / wrap-reverse
CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
- align-content:normal(默认) / center /space-between /space-around
CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
align-content - CSS（层叠样式表） | MDN (mozilla.org)
我对align-content的理解是:将侧轴方向下每行的(沿着主轴方向)一行看作一个处理单元;然后使用方法同justify-content
Level 19 >OvO< 噢耶,找回金币了,快将金币装入宝箱吧
flex-wrap:wrap;
Level 20
我对align-content的理解是:将侧轴方向下每行的(沿着主轴方向)一行看作一个处理单元;然后使用方法同justify-content
如此处的金币 : 两行在中间居中,可以看成两个元素在侧轴方向居中显示;
align-content:center;
Level 21
金币需要在底部,且主轴方向的内容居中显示;
代码:
align-content:flex-end;
justify-content:center;
Level 22
如图,可以看到三个怪人之间竖向的距离是 space-around 布局 且位于最右边
故代码如下:
flex-direction:column-reverse;
justify-content:place-around;
align-items:flex-end;
Level 23
看怪物和宝箱的排列; 竖向排列且主角要干的BOOS在底下,因此主轴方向为 column-reverse
此外要折行显示,且主角所在列在右边那一列:故折行代码为 flex-wrap:wrap-reverse;
看到三宝箱那一列位于主轴方向的中间:故 justify-content:center;
侧轴看(横向看) 这两列位于侧轴方向的中心位置: 故 align-content:center;
Level 24 决战
主角的最后一战还是交给主角去走吧!
文章参考资料来源:
①
https://www.php.cn/blog/detail/21325.html
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
