前端的学习-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⽂件（注…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
Python爬虫（二）：爬虫完整流程
爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程 以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备 网站技术分析： 使用浏览器开发者工具（F12&…...
高危文件识别的常用算法：原理、应用与企业场景
高危文件识别的常用算法：原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件，如包含恶意代码、敏感数据或欺诈内容的文档，在企业协同办公环境中（如Teams、Google Workspace）尤为重要。结合大模型技术&…...
C# SqlSugar：依赖注入与仓储模式实践
C# SqlSugar：依赖注入与仓储模式实践 在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中，从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备（如专用硬件设备），从而消除了直接物理连接的需要。USB over IP的…...