css布局——flex布局知识点总结（青蛙游戏）

已于 2023-05-09 15:06:36 修改
阅读量1.3k 收藏 4
点赞数 1
文章标签： css 前端 css3
于 2023-05-09 10:52:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39123467/article/details/130571987
版权

文章目录

学习网址推荐

Flexbox Froggy

让青蛙跳到与自己相同颜色的荷叶上，一共24个题目，如果能自己完成所有题目，基本就能完全理解Flex布局了

align-items、justify-content

在这里插入图片描述

合并使用左右分布和垂直end

在这里插入图片描述

flex-direction

row

在这里插入图片描述

row-reverse

在这里插入图片描述

column

在这里插入图片描述

column-reserse

在这里插入图片描述

横向逆转并水平start

在这里插入图片描述

垂直列并从末尾排列

在这里插入图片描述

逆向垂直列并左右排列

在这里插入图片描述

水平居中，垂直end，横向逆向

在这里插入图片描述

order、align-self

order改变排序

在这里插入图片描述
在这里插入图片描述

align-self控制自己的位置

在这里插入图片描述
在这里插入图片描述

order&align-self

在这里插入图片描述

flex-wrap

flex-wrap: wrap 表示启用 flex 布局中的换行功能，当 flex 容器中的项目超出容器的宽度时，它们将会自动换行，第一行在上方，后续行在下方，每行从左到右排列。

例一

在这里插入图片描述

在这里插入图片描述

例二

在这里插入图片描述
在这里插入图片描述

使用flex-flow优化

flex-direction和flex-wrap这两个属性经常一起使用，因此创建了一个简写属性flex-flow来组合它们。这个简写属性接受用空格分隔的两个属性的值。
在这里插入图片描述

align-content

这可能会令人困惑，但是align-content决定了行与行之间的间距，而align-items决定了项目作为一个整体如何在容器内对齐。当只有一行时，align-content不起作用。

flex-start

在这里插入图片描述

在这里插入图片描述

flex-end

在这里插入图片描述

在这里插入图片描述

综合

在这里插入图片描述
在这里插入图片描述

综合最后一题

在这里插入图片描述

在这里插入图片描述

鬼鬼骑士
关注
flex布局——宝藏游戏FlexboxFroggy
weixin_50467021的博客
08-11 2139
最近我发现了一个宝藏游戏FlexboxFoggy，适合需要练习flex布局的小伙伴。 这个游戏大致规则就是利用flex布局里的属性，将青蛙移动到对应荷叶的位置就可以过关。 给大家示范一下 比如这个关卡，我们需要让同样颜色的青蛙和荷叶相对应，添加justify-content:space-around代码，视图变成这样 再添加align-items:flex-end,就可以过关 最后附上一张通关全家图： 一共有24关，很快就可以通关啦！来试试看吧！ ...
css flex布局 —— 项目属性 flex-basis
且听风吟的博客
10-14 1569
css flex布局 —— 项目属性 flex-basis
小青蛙FLash
06-20
flash小青蛙找妈妈的素材，同时有池塘背景，可以用来作为课件使用
CSS Flexbox 青蛙游戏
前端开发博客
11-01 3174
关注前端开发博客，回复“加群”加入我们一起学习，天天进步导语在学习CSS中，Flexbox是一个比较实用的CSS 布局属性，但很复杂，有些人可能没法很快掌握，今天我要推荐一个跟这个相关...
CSS布局之Flex-box弹性盒子布局详解
最新发布
m0_75116965的博客
07-30 1508
详细介绍Flex-box弹性盒子布局的整体属性用法
CSS 青蛙游戏
hkw20的博客
11-10 3339
前言 最近都在研究如何让Web前端学习更加有趣，对新人更加友好，而游戏化（Gamification）是我未来也想要深入的一个重要方向。为此我做了一些调研，发现有不少优秀的玩中学的游戏化内容做得很赞，每一个我都打通关了，此文给大家做一个分享。 以下游戏都是免费的 Flexbox Defense 这是一个塔防游戏，一共12关，玩家可以使用align-items, justify-content, flex-direction, align-self 等语法来设置防御塔的位置从而击败进击的敌人。 flexbox
通过游戏来学习CSS的Flex布局
YooHoeh的博客
03-01 481
在复习Flex 布局的时候发现的了几个有趣的小游戏，在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上，游戏默认难度为Beginner会有提示，可以在下面的settings关闭提示，一共24关，感觉只有17和24有点疑惑，这里标记一下答案 Flexbox Froggy 17关 Flexbox Froggy 24关## 2. ...
玩游戏 学Flex布局
weixin_33725270的博客
01-14 155
大家好，今天推荐一个学习Flex布局的网页小游戏，非常不错，是国外的牛人开发的，值得一试，重复几次，就会大概了解Flex的属性了！ 地址： http://flexboxfroggy.com/#zh-cn 文章乃参考、转载其他博客所得，仅供自己学习作笔记使用！！！ 转载于:https://www.cnblogs.com/Y1473/p/10269345.html...
flex布局青蛙游戏通关攻略
m0_63263973的博客
07-28 2010
flex青蛙游戏
详解CSS3伸缩布局盒模型Flex布局
12-09
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局（Flexible Box）模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。 CSS3引入...
GridGarden一个学习CSS网格布局的游戏
08-10
Grid Garden 一个学习CSS网格布局的游戏
纯CSS3绘制可爱的青蛙表情
11-24
纯CSS3绘制可爱的青蛙表情
可爱的CSS3青蛙表情动画特效
06-12
可爱的CSS3青蛙表情动画特效是一款通过CSS3 transform和animation来制作小动物青蛙图标动画效果。
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一...
css flex布局 —— 项目属性 flex-grow
且听风吟的博客
09-26 3199
css flex布局 —— 项目属性 flex-grow
flex布局青蛙游戏答案（前端CSS弹性布局练习）
Yongqiang Chen的博客
02-20 953
#青蛙游戏# flex布局青蛙游戏答案（前端CSS弹性布局练习）
Flex布局
m0_56778759的博客
10-04 390
Flex布局
CSS3伸缩布局盒模型Flex布局详解
详解CSS3伸缩布局盒模型Flex布局 Flex布局是CSS3引入的一种新的布局模式，即伸缩盒模型布局（FlexibleBox）模型。用来提供一个更加有效的方式确定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鬼鬼骑士

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值