Flex布局

最新推荐文章于 2024-06-11 21:26:35 发布
最新推荐文章于 2024-06-11 21:26:35 发布
阅读量163 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AlphaBr/article/details/104560989
版权

文章目录

基本概念

  • flex container：弹性容器
  • flex item：弹性元素
  • main/cross axis：主/侧 轴
  • main/cross start：主/侧 轴起点
  • main/cross end：主/侧 轴终点
  • main/cross size：一个弹性元素在 主轴/侧轴 区域内的长度
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RdiFn9lX-1582883736021)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/52faa596-04f0-411f-ac29-352d2a43508b/flex-container.png)]

flex container 的属性

在这里插入图片描述

flex item 的属性

在这里插入图片描述

完美居中

display:flex;
justify-content:center;
align-items:center;

flex布局练习小游戏

  1. 小青蛙找荷叶
  2. 塔防

参考资料

Flex 布局教程：语法篇

秀强
关注
专栏目录
flex小游戏
12-13
flex小游戏五子棋 新手可用 自己做的一点小东西 希望对大家有用
通过游戏来学习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...
CSS flex 布局小游戏
没有从今天开始
12-29 1585
Flex Forggy 小游戏闯关记录 虽然是把关给闯完了，但学的还是很懵逼，没有系统性的思路，还是需要系统性的把flex布局看一遍，这个小游戏可以检测一下自己的flex布局学的是否过关,我把自己闯关的代码放在上面 1.第一关 justify-content: flex-end; 2.第二关 justify-content:center; 3.第三关 justify-content: space-around; 4.第四关 justify-content: space-between; 5.第五
css flex布局网页小游戏
liber_langzi的博客
04-03 3432
一、小青蛙回家（Flexbox Froggy - A game for learning CSS flexbox） 二、弹性盒子防御(Flexbox Defense)
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
Flex布局让子项保持自身高度的实现
01-19
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。   这是因为Flex 布局会默认： 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽，并把所有子项的高度变为最高子项的...
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
轻松学习 Flex 布局的小游戏
努力做最接地气的编程干货分享，感谢关注
04-15 2088
轻松学习 Flex 布局的小游戏 Flexbox Froggy，帮助你学习前端 Flex 布局的小游戏，难度不高，趣味性极强！ Flexbox Froggy（弹性盒小青蛙）是一个帮助你快速学习前端 Flex 布局的小游戏。 Flex 布局是 CSS3 的新特性，即弹性盒子布局模式。是一种能让页面自适应不同屏幕大小的布局方式。熟练运用后，能够大大提升网页开发布局效率。 在游戏中，你的任务就是编写代码，运用 Flex 布局的相关属性和值，来帮助各种颜色的小青蛙找到到对应的荷叶，总共只有 24 个关卡。整体难
Flex游戏篇——游戏开发概述
热门推荐
hunkcai的专栏
12-24 1万+
概述 游戏开发是个很大的课题，该系列只简单讲述如何使用Flex技术平台搭建一个简单的游戏框架，如何设计能优化游戏的CPU占用，内存等，最后制作一个完整的Flex小游戏(提供源码)。 游戏的呈现 方式1：元件方式 这种方式比较适合小型的游戏，游戏元件数量少的情况。当游戏元件数量大时就不合适了：元件会对游戏图形、音频等资源进行拷贝，浪费大量内存；并且元件会独立管理自身的呈现，这个
学习CSS Flexbox 玩flexboxfroggy flexboxfroggy1-24关详解
Jay17的博客
04-07 1654
学习CSS Flexbox 玩flexboxfroggy flexboxfroggy1-24关详解
学会CSS，只需玩这10款小游戏
qqrrjj2011的博客
12-25 1148
这是一款为速度狂人设计的游戏！在18个挑战关卡中，用你的flex技巧指挥骑士们，让他们在餐桌上大显身手！拿起你的键盘武器，通过12个紧张刺激的关卡，用flex布局移动你的炮台，保护你的道路不受邪恶攻击，你能成为终极防御大师吗？想象一下，你是一个园丁，你的任务是用水滋润所有的胡萝卜。你有24个关卡的时间来施展你的flex魔法，把小青蛙送到位，准备好了吗？通过解决一道道有趣的题目，挑选出餐桌上的特定物品，享受动画特效带来的欢乐，你就是那位选择器大师！面对画面和三个选项，发动你的CSS脑力引擎，找出正确的答案。
Flex Box 冒险小游戏
最新发布
2301_80358024的博客
06-11 1715
代码：justify-content:flex-end(沿主轴末端对齐)代码:flex-direction:column-reverse;代码：flex-direction:column-reverse;代码： flex-direction:column-reverse;代码：flex-direction:row-reverse。代码:flex-direction:row-reverse;代码：align-content:flex-end;代码:align-items:flex-end;
FLEXBOX FROGGY11-24level(flex布局小游戏)
weixin_43406277的博客
11-30 4351
FLEXBOX FROGGY11-24level(flex布局小游戏) FLEXBOX FROGGY11-24level(flex布局小游戏) level-11 使用 flex-direction 和 justify-content帮助青蛙找到他们的荷叶 当伸缩方向为纵向时，justify-content将改变垂直方向，align-items将改变水平方向。 flex-direction:column;//将方向更改为垂直方向 justify-content:end;//将小青蛙移到底部 #po
Flex布局：实例篇
06-04 1293
本文参考《阮一峰 Flex 布局 实例篇》 注：代码稍有改动，原文的宽度刚好够放三个点，有时候，第二个点并未居中，但看起来似乎是居中的，容易引起歧义. 本文 demo 源码 一、骰子布局 骰子的一面，最多可以放置9个点下面，就来看看Flex如何实现，从一个点到九个点的布局。 如果不加说明，demo 中的HTML一律如下 <div class="box"> <span ...
flex练习小游戏
没化妆，别看
10-27 889
flex练习小游戏 分享一个可以练习flex布局的小游戏 本游戏总共有24关，可以帮助你在游戏中练习flex布局 Settings 按钮可以切换为中文或者其他语言呦 这是小游戏地址 加油，冲冲冲！
flex布局——宝藏游戏FlexboxFroggy
weixin_50467021的博客
08-11 2139
最近我发现了一个宝藏游戏FlexboxFoggy，适合需要练习flex布局的小伙伴。 这个游戏大致规则就是利用flex布局里的属性，将青蛙移动到对应荷叶的位置就可以过关。 给大家示范一下 比如这个关卡，我们需要让同样颜色的青蛙和荷叶相对应，添加justify-content:space-around代码，视图变成这样 再添加align-items:flex-end,就可以过关 最后附上一张通关全家图： 一共有24关，很快就可以通关啦！来试试看吧！ ...
Flex布局详解：打造弹性盒模型
"本文档详细介绍了CSS中的flex布局，包括其基本原理、主要属性以及应用场景。flex布局，或称为flexible Box布局，旨在提供一种更灵活的盒状模型，允许容器内的子元素根据屏幕尺寸和内容调整其排列、大小和顺序。通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值