【前言】
昨天总结了下flex布局的基础语法，今天来做几个实例深入学习下。
推荐一篇不错的博主：阮一峰老师，文章写的十分详细，结合简单图片解析后可以快速理解。
下面记下根据教程学习后的笔录
【列表】
（1）经典的骰子布局（1点和6点）
（2）网格布局
（3）圣杯布局
（4）输入框布局
【主体】
（1）经典的骰子布局
基本模板架构：
<div class="box"> <span class="item"></span> </div>
div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推
①六点
<style type="text/css">
.box{
width: 250px;
height: 250px;
background: rgba(0,0,0,0.5);
border-radius: 10%;
margin: auto;
padding: 15px;
display: flex;
flex-direction:row;/*水平排列方向*/
flex-wrap: wrap;/*换行*/
justify-content: space-around;/*水平对齐方式*/
align-content: space-around;/*垂直对齐方式*/
}
.column{
width: 100%;
height: auto;
justify-content: space-around;
display: flex;
}
.item{
display: block;
height: 50px;
width: 50px;
background-color: white;
border-radius: 100%;
}
</style>
<div class="box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
②一点
//css
.box{
display: flex;
justify-content: center;/*水平对齐方式*/
align-items: center;/*垂直对齐方式*/
}
//HTML
<div class="box">
<span class="item"></span>
</div>
（2）网格布局
①基本网格布局
最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放
<style type="text/css">
.Grid {display: flex;}
.Grid-cell { flex: 1;}
</style>
<div class="Grid">
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
</div>
②百分比布局
某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间
（3）圣杯布局（Holy Grail Layout）
指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局实例</title>
<style type="text/css">
*{margin: 0;padding: 0}
.main-body{
box-sizing: border-box;
display: flex;
min-height: 600px;
flex-direction: column;/*项目排列方向垂直*/
}
header,footer{
text-align: center;
flex: auto;
height: 10%;
}
header{background-color: rebeccapurple}
footer{background-color: #5bd5a0}
.body {
text-align: center;
display: flex;
flex: 1;
background-color: #AAAAAA;
}
main{flex: 1}
nav,aside{
/* 两个边栏的宽度设为16em */
flex: 0 0 16em;
}
nav{background-color: #1daee9}
aside{background-color: #009922}
nav {
/* 导航放到最左边 */
order: -1;
}
//如果是小屏幕，躯干的三栏自动变为垂直叠加
@media (max-width: 768px) {
.body {
flex-direction: column;
flex: 1;
}
nav,aside,main{
flex: auto;
}
}
</style>
</head>
<body>
<div class="main-body">
<header>头部</header>
<div class="body">
<main>主体部分</main>
<nav>左侧导航栏</nav>
<aside>副栏</aside>
</div>
<footer>底部</footer>
</div>
</body>
</html>
（4）输入框的布局
我们常常需要在输入框的前方添加提示，后方添加按钮
//CSS代码
.InputAddOn {display: flex;}
.InputAddOn-field {flex: 1;}
//HTML代码
<div class="InputAddOn">
<span class="InputAddOn-item">...</span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">...</button>
</div>
.
相关推荐
数分1.11Tableau安装及使用教程
内容概要：本文主要围绕着计算机信息系统运行管理员考试展开讨论，详细介绍了有关信息系统在运维中的各种问题及其应对方案。具体而言，文中不仅列举出了不同类型的信息系统对其本身的要求，而且还深入探讨了运维管理中面临的挑战和技术手段。另外，文章特别提及了一些特定类型的系统（例如政府系统和财务管理等），并指明在面对它们时需要考虑的安全级别、稳定性等关键要素；同时也强调了良好的文档管理和合理的设施运维对象划分，以及软硬件的选择与维护。同时文章还讲解了多种工具的作用（比如Nagios），以及硬件如计算机机房和UPS的具体规格和要求；并且讲述了关于变更管理和发布管理等的概念与实际应用场景。此外，在最后一部分内容里也谈到了云架构及其各个构成部分。 适用人群：本文适合即将参加软考信息运行管理员认证的专业人士，也适用于希望深入了解信息系统运作、管理和维护的技术从业者和相关领域的管理人员。 使用场景及目标：本资料旨在辅助考生掌握信息系统的高效、稳健地构建与运营所需的知识和技术，帮助他们顺利通过软考的同时提升实战经验；同时也为企业信息化建设提供了宝贵的理论基础和实践指南。 其他说明：虽然本文聚焦于特定职业资格证书
大型语言模型（LLMs）的出现彻底改变了自然语言处理。然而，这些模型在从大量数据集中检索精确信息时面临挑战。检索增强生成（RAG）旨在通过结合外部信息检索系统来增强LLMs，从而提高响应的准确性和上下文性。尽管有所改进，RAG在高容量、低信息密度数据库中的全面检索仍然存在困难，并且缺乏关系意识，导致答案碎片化。 为了解决这一问题，本文介绍了伪知识图谱（PKG）框架，该框架通过集成元路径检索、图内文本和向量检索到LLMs中，旨在克服这些限制。通过保留自然语言文本并利用各种检索技术，PKG提供了更丰富的知识表示并提高了信息检索的准确性。使用Open Compass和MultiHop-RAG基准进行的广泛评估表明，该框架在管理和处理大量数据及复杂关系方面具有有效性。
python学习教程
请到网盘中自取压缩包，此包为kibana-7.10.2 镜像压缩包，是通过现有镜像导出来的，主要是为了解决有些机器无法连接外网，导致无法下载镜像 加载镜像： docker load -i kibana-7.10.2.tar 查看镜像： docker images 备注：elk此镜像配套资源，相同版本的elasticsearch和logstash，请在我的资源中搜索其他镜像
UniApp开发一个简单的记事本应用文字教程
基于Andorid的音乐播放器项目设计（QQ音乐）实现源码，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。
python学习资源
React Developer Tools在谷歌拓展的应用商城下载不了任何解决
【毕业设计-java】springboot-vue健身房管理系统源码（完整前后端+mysql+说明文档+LunW）.zip
python学习资源
本文提供了一套完整的指南，帮助用户在Anaconda中配置PyTorch环境，便于深度学习开发。首先，用户需要确保安装Anaconda，并通过Anaconda Prompt创建一个新的虚拟环境，以隔离项目依赖。创建好环境后，用户可以根据所用操作系统以及CUDA版本，选择适合的安装命令。对于Windows和Linux用户，提供了安装PyTorch、TorchVision和TorchAudio的具体命令，包括CUDA Toolkit的版本选择。macOS用户则可以安装仅支持CPU的版本。安装完成后，通过简单的Python代码验证PyTorch是否成功安装以及GPU的可用性。文中还列出了常见问题及解决方法，帮助用户快速排查安装过程中可能遇到的障碍。通过遵循这些步骤，用户可以顺利搭建起一个专属的PyTorch开发环境，提升深度学习的工作效率和体验。
python学习教程
内容概要：本文汇总了学习数据结构的相关资源，旨在帮助读者系统化地理解和掌握这一计算机科学的基础概念。文中首先列举了一系列权威在线学习资源，包括知名教授的主页、在线编程平台LeetCode和技术博客，这些资源不仅理论丰富，还提供大量的实例和练习机会。接着推荐了几本经典的书籍，如《算法导论》、《大话数据结构》，适合不同程度的学习者深入理解算法和数据结构的细节。此外，还特别提及了几门高质量的网络课程，能够为初学者提供清晰的学习路径。最后强调通过动手实践，如动态数组的C语言实现以及算法题目的刷题练习，是提高编程技能的有效途径。 适合人群：对于想要系统学习并掌握数据结构的程序员及爱好者。 使用场景及目标：适用于个人自学或者课堂教学，目的是通过综合使用理论学习、实践操作来达到对数据结构和算法有全面深刻的认识。 其他说明：本文提供了丰富的链接，让读者可以直接访问各个优质教育资源进行深度探究，鼓励大家积极参与讨论，相互分享心得体验，形成良好的互动交流氛围。
QMI8658 Datasheet
【毕业设计】java-springboot-vue火车订票管理系统源码（完整前后端+mysql+说明文档+LunW）.zip
Screenshot_2025-03-10-22-52-22-034_com.miui.notes.jpg
python学习教程
基于unet医学细胞分割python实战源码+数据集（图像分割大作业）.zip 【项目简介】 该项目是一个基于 U-Net 的医学细胞分割实战项目,适合初学者学习。项目包含了数据集准备、模型构建、训练和验证等完整的流程。 主要功能 实现 U-Net 模型的构建和训练 提供医学细胞分割的数据集和数据预处理 实现分割模型的评估指标,如 Dice 系数等 Python PyTorch U-Net 模型 【项目说明】 1.多数小白下载后，在使用过程，可能会遇到些小问题，若自己解决不了，请及时私信描述你的问题，我会第一时间提供帮助，也可以远程指导 2.项目代码完整可靠，但难度适中，满足一些毕设、课设要求，且属于易上手的优质项目，项目内基本都有说明文档，按照操作即可，遇到困难也可私信交流 3.适用人群：各大计算机相关专业行业的在校学生、高校老师、公司程序员等下载使用