前端的学习-CSS（弹性布局-flex）
一：什么是弹性布局-Flex
flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
语法：
.box{display: flex;
}.box{display: inline-flex;
}注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
基本概念：
按照我自己的理解，横向代表主轴的方向，纵向代表交叉轴的方向，横向的方向由左到右为开始到结束，纵向则是由上到下。
我将被设置弹性布局的盒子称作父元素，将里面的内容称为子元素。方便记忆。
通常设置盒子页面都是按照标准流进行排列。块元素的话就是从上到下排列。如下图。
现在给父元素也就是绿色的盒子设置弹性布局。 子元素的盒子会自动按照主轴方向排列。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>弹性布局</title><style type="text/css">.main-box {width: 800px;height: 300px;background-color: aquamarine;margin: 0 auto;/* 设置弹性盒子 */display: flex;}.main-box>div {width: 200px;height: 200px;border: 1px solid red;font-size: 20px;color: #000;}</style></head><body><div class="main-box"><div>1</div><div>2</div><div>3</div></div></body>
</html>
以下6个属性设置在容器上。
flex-direction：项目的排列方向
flex-wrap：项目如何换行
flex-flow： flex-direction 属性和 flex-wrap的简写方式。
justify-content：项目在主轴上的对齐方式
align-items：项目在交叉轴上如何对齐
align-content：多根轴线的对齐方式
1： flex-direction：项目的排列方向
flex-direction，默认排列为主轴方向，也就是水平方向。
box {flex-direction: row | row-reverse | column | column-reverse;
}
row：默认方向，主轴的方向
row-reverse：主轴方向，但元素会从主轴结束的方向开始排列，并且元素的顺序会反过来。
column：交叉轴方向
colmun-reverse：交叉轴方向，但元素会从交叉轴结束的方向开始排列，并且元素的顺序会反过来。。
flex-direction: row-reverse;设置交叉轴方向
flex-direction: column;
设置交叉轴反向
flex-direction: column-reverse;
2：flex-wrap：项目如何换行
首先弹性布局默认是不会换行，当子元素的宽度或者高度总和加起来大于父元素的宽度时，子元素会被压缩。如下。
这时如果需要换行，则需要flex-warp属性来控制，flex-warp默认是 flex-warp: no-warp;
这时将其值为：flex-warp: warp;
flex-wrap: wrap;交叉轴方向换行
.main-box {width: 800px;height: 300px;background-color: aquamarine;margin: 0 auto;/* 设置弹性盒子 */display: flex;/* 设置交叉轴方向 */flex-direction: column;flex-wrap: wrap;
}3：justify-content：项目在主轴上的对齐方式
.box {justify-content: flex-start | flex-end | center | space-between |space-around;
}justify-content: flex-start;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
space-around与space-evenly的区别是，space-evenly的间隙全是一样的，而，sapce-around的最左右两别的间隙和子元素之间的间隙是不一样的，space-beween的只有中间存在空隙。
4： align-items：项目在交叉轴上如何对齐
.box {align-items: flex-start | flex-end | center | baseline | stretch;
}align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;以第一行文字的基线作为对齐的基准。
align-items: baseline; 
如果子元素未设置高度，而设置了align-items: stretch; 则会占满整个父元素。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>弹性布局</title><style type="text/css">.main-box {width: 800px;height: 300px;background-color: aquamarine;margin: 0 auto;/* 设置弹性盒子 */display: flex;/* 设置交叉轴方向 */align-items: stretch;}.main-box>div {width: 100px;/* height: 300px; */border: 1px solid red;font-size: 20px;color: #000;}</style></head><body><div class="main-box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box4">4</div><div class="box5">5</div></div></body>
</html> 
5： align-content：多根轴线的对齐方式
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {align-content: flex-start | flex-end | center | space-between | spacearound | stretch;
}align-content: flex-start;
align-content: flex-end;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;
align-content: center;
align-content: stretch;
今天就先这样。。。。。。
相关文章：
前端的学习-CSS（弹性布局-flex）
一：什么是弹性布局-Flex flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 语法： .box{display: flex; } .box{display: inline-flex; } 注意，设为 Flex 布局以后࿰…...
vue3集成LuckySheet实现导入本地Excel进行在线编辑，以及导出功能
第一步：克隆或者下载下面的代码 git clone https://github.com/dream-num/Luckysheet.git第二步：安装依赖 npm install npm install gulp -g 第三步：运行 npm run dev效果如下图所示 第四步：打包 打包执行成功后，…...
【征求意见】同济大学--城镇给水厂碳排放核算与评价方法
城镇给水厂保障城镇居民正常生活，是社会经济良性发展的重要基础性设施，对于我国双碳战略目标的实现至关重要。 随着城镇化的发展，城镇供水量不断升高，加上 水资源与生态环境问题不断涌现，人们对水的安全和品质的需求日…...
【Python】后台开发返回方法和状态码类的实现
Python 后台开发中，获取返回的类方法，以及状态码类的实现 代码备份 Code - response.py """ Response class for quick generate response """ from loguru_logger import get_loggerlogger get_logger(__name__)clas…...
opencloudosV8.6和openEuler 24安装 k8s
在三台机器上部署 Kubernetes 集群 1.环境准备2.在所有节点上进行以下步骤1. 更新系统和安装必要的软件包2. 禁用交换分区3. 禁用防火墙和SElinux4.系统主机名5.设置主机名与IP地址解析6.配置内核转发及网桥过滤7. 配置 Docker Cgroup 驱动8. 添加 Kubernetes 仓库并安装 kubea…...
Tensor安装和测试
1: 打开git官方 https://github.com/NVIDIA/TensorRT 2: 下载得到：TensorRT-10.2.0.19.Linux.x86_64-gnu.cuda-11.8.tar.gz 3: 下载后配置环境变量，上面地址记得改成真实地址。 4: 如果想python使用tensorrt，那么 解压后目录，…...
ELK对业务日志进行收集
ELK对业务日志进行收集 下载httpd 进到文件设置收集httpd的文件进行 设置 编辑内容 用于收集日志的内容 将日志的内容发送到实例当中 input {file{path > /etc/httpd/logs/access_logtype > "access"start_position > "beginning"}file{path &g…...
新质生产力
新质生产力”是一个相对较新的概念，指的是在数字化、智能化背景下，依托新技术、新业态、新模式，提升生产力质量和效率的一种生产力形态。它强调的是技术和创新对生产力的提升作用，尤其是在人工智能、大数据、互联网等新兴技术的推…...
《LeetCode热题100》---＜5.②普通数组篇五道＞
本篇博客讲解LeetCode热题100道普通数组篇中的六道题 第三道：轮转数组（中等） 第四道：除自身以外数组的乘积（中等） 第三道：轮转数组（中等） 方法一：使用额外的数…...
【面试题】【C语言】寻找两个正序数组的中位数
寻找两个正序数组的中位数 仅供学习 题目 算法时间复杂度 二分查找算法，时间复杂度为 O(log(min(m, n)))，其中 m 和 n 分别是两个数组的长度。 子函数 查找两个数字的最大值 int max(int a, int b) {return a > b ? a : b; }查找两个数字的最小…...
原始的原型链是怎样玩的
带着问题看代码： 1、原始的继承是怎样实现继承的？ A类的prototype 属性 B类的实例 2、实现继承后，连B类的中实例的属性（放在了A类的prototype中）和原型链的上的东西都可以用 3、A.prototype.constructor实际上已经指向…...
RabbitMQ高级篇（如何保证消息的可靠性、如何确保业务的幂等性、延迟消息的概念、延迟消息的应用）
文章目录 1. 消息丢失的情况2. 生产者的可靠性2.1 生产者重连2.2 生产者确认2.3 生产者确认机制的代码实现2.4 如何看待和处理生产者的确认信息 3. 消息代理（RabbitMQ）的可靠性3.1 数据持久化3.2 LazyQueue（ 3.12 版本后所有队列都是 Lazy Qu…...
正点原子imx6ull-mini-Linux驱动之platform设备驱动实验（14）
我们在前面几章编写的设备驱动都非常的简单，都是对IO进行最简单的读写操作像I2C、 SPI、LCD 等这些复杂外设的驱动就不能这么去写了，Linux 系统要考虑到驱动的可重用性，因此提出了驱动的分离与分层这样的软件思路，在这个思路下诞生…...
z3基础学习
z3基础学习 z3是一个微软出品的开源约束求解器，能够解决很多种情况下的给定部分约束条件寻求一组满足条件的解的问题。 安装：pip install z3-solver 1. 简单使用 from z3 import * x Int(x) #创建名为x的int类型变量 y Int(y) solve(x y10,2*x…...
开发助手专业版，有反编译等多种功能
软件介绍 开发助手能够用来快速调试应用以及查看手机软硬件相关信息，包括：快速打开或关闭开发者选项中的选项。 将原来几十秒的操作缩短为一次点击。包括显示布局边界，显示 GPU 过度绘制。显示布局更新。强制 GPU 渲染 显示 GPU 视图更新&a…...
嵌入式初学-C语言-十一
#接嵌入式初学-C语言-十,以及部分例题# 循环结构 break和continue break 功能： 1. 用在switch中，用来跳出switch的case语句；如果case没有break，可能会产生case穿透。 2. 用在循环中（while、do..while、for..&#…...
浅谈几个常用OJ的注册方式
众所周知，好的OJ是成功的一半，但是有些英文OJ的注册很让人伤脑筋。 CodeForces 点进官网 戳这里 然后就会进入这个页面 在这一页里面里填写好信息即可 最后，一个邮件就会发到你的邮箱上，点击其中的链接即可激活账号 AtCoder …...
Html实现全国省市区三级联动
目录 前言 1.全国省市区的Json数据 2.找到Json数据文件(在此博文绑定资源)之后，放到resource目录下。 3.通过类加载器加载资源文件，读取Json文件 3.1 创建JsonLoader类 3.2 注入JsonLoader实体，解析Json文件 4.构建前端Html页面 5.通过…...
前端构建工具Webpack 与 Vite 大对比
在现代前端开发领域，构建工具扮演着至关重要的角色。它们不仅可以帮助我们管理项目依赖关系，还可以优化我们的代码，使其在生产环境中运行得更快更高效。其中两个最受欢迎的构建工具就是 Webpack 和 Vite。在这篇文章中，我们将深入…...
Ubuntu-22.04环境搭建
安装wget(一般ubuntu会自带) sudo apt-get install wget 更换国内软件源 先备份原来的/etc/apt/source.list⽂件 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 防止修改错误 导致无可挽回 将下列国内镜像源 写入原来的/etc/apt/source.list⽂件（注…...
家庭影院系统构建指南：从流媒体技术到硬件选型
1. 疫情下的娱乐变局：从影院到客厅的深度迁移作为一名长期关注消费电子与家庭娱乐领域的从业者，我亲历了过去几年行业最剧烈的震荡。疫情像一只无形的手，强行按下了社会运行的暂停键，却又为另一个赛道按下了加速键。当电影院的大门…...
多模态大模型在光谱分析中的应用：温度参数调优与性能评估
1. 项目概述：当光谱分析遇上多模态大模型光谱分析，无论是红外、拉曼还是近红外光谱，一直是材料科学、生物医药、环境监测等领域的“火眼金睛”。它能通过物质与光的相互作用，揭示出样品的成分、结构乃至状态信息。然而，…...
为AI智能体构建持久化记忆系统：基于RAG与向量检索的实践
1. 项目概述：为AI智能体构建持久化记忆系统在AI智能体（AI Agent）的开发浪潮中，一个核心的痛点日益凸显：如何让智能体拥有持续、可靠的记忆能力？无论是基于Claude API、GPTs还是其他大语言模型构建的对话机器…...
深入T100系统腹地：拆解标准区、测试区与客制开发的协作逻辑
深入T100系统腹地：拆解标准区、测试区与客制开发的协作逻辑 在企业管理系统的复杂生态中，T100以其独特的四区架构和多环境协作机制，为企业的数字化转型提供了稳健的技术支撑。这套架构不仅关乎代码的流转，更是企业业务流程标准化与…...
Tinke完整技术指南：NDS游戏资源提取与逆向工程深度解析
Tinke完整技术指南：NDS游戏资源提取与逆向工程深度解析 【免费下载链接】tinke Viewer and editor for files of NDS games 项目地址: https://gitcode.com/gh_mirrors/ti/tinke Tinke是一款专业的任天堂DS（NDS）游戏资源提取与逆向工程…...
别再折腾Windows了！用Mac或Linux搞定ACM LaTeX模板的字体难题（附保姆级配置流程）
跨平台LaTeX写作：为什么macOS和Linux是ACM模板的最佳选择 第一次接触ACM LaTeX模板的研究人员，往往会在字体兼容性问题上耗费大量时间——特别是Windows用户。当你反复尝试安装Libertine字体、解决各种编译错误时，是否想过问题可能出在操作系…...
告别混乱：用SAP STO退货功能（NCR/NLR）清晰管理公司间物料退回
告别混乱：用SAP STO退货功能（NCR/NLR）清晰管理公司间物料退回 当集团企业发展到多工厂、多法人架构时，物料在组织间的流动管理往往成为供应链的痛点。特别是在退货场景下，手工处理导致的账实不符、责任归属模糊等问题&…...
个人开发者如何利用 Taotoken 管理多个项目的 AI 调用成本
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 个人开发者如何利用 Taotoken 管理多个项目的 AI 调用成本 对于独立开发者或自由职业者而言，同时维护多个小型项目是常…...
终极ComfyUI视频插件指南：从零开始构建AI视频生成工作流
终极ComfyUI视频插件指南：从零开始构建AI视频生成工作流 【免费下载链接】ComfyUI-WanVideoWrapper 项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI-WanVideoWrapper 你是否曾梦想过让静态图片“活”起来，或者让文字描述直接变成生动…...
零成本AI评审知识库：基于GitHub Actions与Gemini的自动化学术发布平台
1. 项目概述：一个零成本、AI驱动的开放知识库如果你是一名研究者、开发者，或者正在构建一个需要实时验证信息的AI智能体，那么你一定对传统学术出版的漫长周期和封闭性感到头疼。一篇论文从投稿到发表，动辄数月，评审过程…...