当前位置：首页 > news >正文

前端的学习-CSS（弹性布局-flex）

news 2026/2/8 0:24:49

一：什么是弹性布局-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 布局以后&#xff0…...

编程日记 2024/8/3 10:19:12

vue3集成LuckySheet实现导入本地Excel进行在线编辑，以及导出功能

第一步：克隆或者下载下面的代码 git clone https://github.com/dream-num/Luckysheet.git第二步：安装依赖 npm install npm install gulp -g 第三步：运行 npm run dev效果如下图所示第四步：打包打包执行成功后，…...

编程日记 2024/8/3 10:17:09

【征求意见】同济大学--城镇给水厂碳排放核算与评价方法

城镇给水厂保障城镇居民正常生活，是社会经济良性发展的重要基础性设施，对于我国双碳战略目标的实现至关重要。随着城镇化的发展，城镇供水量不断升高，加上水资源与生态环境问题不断涌现，人们对水的安全和品质的需求日…...

编程日记 2024/8/3 10:16:08

【Python】后台开发返回方法和状态码类的实现

Python 后台开发中，获取返回的类方法，以及状态码类的实现代码备份 Code - response.py """ Response class for quick generate response """ from loguru_logger import get_loggerlogger get_logger(__name__)clas…...

编程日记 2024/8/3 10:14:06

opencloudosV8.6和openEuler 24安装 k8s

在三台机器上部署 Kubernetes 集群 1.环境准备2.在所有节点上进行以下步骤1. 更新系统和安装必要的软件包2. 禁用交换分区3. 禁用防火墙和SElinux4.系统主机名5.设置主机名与IP地址解析6.配置内核转发及网桥过滤7. 配置 Docker Cgroup 驱动8. 添加 Kubernetes 仓库并安装 kubea…...

编程日记 2024/8/3 10:12:04

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，那么解压后目录&#xff0c…...

编程日记 2024/8/3 10:10:01

ELK对业务日志进行收集

ELK对业务日志进行收集下载httpd 进到文件设置收集httpd的文件进行设置编辑内容用于收集日志的内容将日志的内容发送到实例当中 input {file{path > /etc/httpd/logs/access_logtype > "access"start_position > "beginning"}file{path &g…...

编程日记 2024/8/3 10:09:00

新质生产力

新质生产力”是一个相对较新的概念，指的是在数字化、智能化背景下，依托新技术、新业态、新模式，提升生产力质量和效率的一种生产力形态。它强调的是技术和创新对生产力的提升作用，尤其是在人工智能、大数据、互联网等新兴技术的推…...

编程日记 2024/8/3 10:05:58

《LeetCode热题100》---＜5.②普通数组篇五道＞

本篇博客讲解LeetCode热题100道普通数组篇中的六道题第三道：轮转数组（中等） 第四道：除自身以外数组的乘积（中等） 第三道：轮转数组（中等） 方法一：使用额外的数…...

编程日记 2024/8/3 10:04:56

【面试题】【C语言】寻找两个正序数组的中位数

寻找两个正序数组的中位数仅供学习题目算法时间复杂度二分查找算法，时间复杂度为 O(log(min(m, n)))，其中 m 和 n 分别是两个数组的长度。子函数查找两个数字的最大值 int max(int a, int b) {return a > b ? a : b; }查找两个数字的最小…...

编程日记 2024/8/3 10:02:53

原始的原型链是怎样玩的

带着问题看代码： 1、原始的继承是怎样实现继承的？ A类的prototype 属性 B类的实例 2、实现继承后，连B类的中实例的属性（放在了A类的prototype中）和原型链的上的东西都可以用 3、A.prototype.constructor实际上已经指向…...

编程日记 2024/8/3 10:01:52

RabbitMQ高级篇（如何保证消息的可靠性、如何确保业务的幂等性、延迟消息的概念、延迟消息的应用）

文章目录 1. 消息丢失的情况2. 生产者的可靠性2.1 生产者重连2.2 生产者确认2.3 生产者确认机制的代码实现2.4 如何看待和处理生产者的确认信息 3. 消息代理（RabbitMQ）的可靠性3.1 数据持久化3.2 LazyQueue（ 3.12 版本后所有队列都是 Lazy Qu…...

编程日记 2024/8/3 10:00:51

正点原子imx6ull-mini-Linux驱动之platform设备驱动实验（14）

我们在前面几章编写的设备驱动都非常的简单，都是对IO进行最简单的读写操作像I2C、 SPI、LCD 等这些复杂外设的驱动就不能这么去写了，Linux 系统要考虑到驱动的可重用性，因此提出了驱动的分离与分层这样的软件思路，在这个思路下诞生…...

编程日记 2024/8/3 9:59:50

z3基础学习

z3基础学习 z3是一个微软出品的开源约束求解器，能够解决很多种情况下的给定部分约束条件寻求一组满足条件的解的问题。安装：pip install z3-solver 1. 简单使用 from z3 import * x Int(x) #创建名为x的int类型变量 y Int(y) solve(x y10,2*x…...

编程日记 2024/8/3 9:58:49

开发助手专业版，有反编译等多种功能

软件介绍开发助手能够用来快速调试应用以及查看手机软硬件相关信息，包括：快速打开或关闭开发者选项中的选项。将原来几十秒的操作缩短为一次点击。包括显示布局边界，显示 GPU 过度绘制。显示布局更新。强制 GPU 渲染显示 GPU 视图更新&a…...

编程日记 2024/8/3 9:57:47

嵌入式初学-C语言-十一

#接嵌入式初学-C语言-十,以及部分例题# 循环结构 break和continue break 功能： 1. 用在switch中，用来跳出switch的case语句；如果case没有break，可能会产生case穿透。 2. 用在循环中（while、do..while、for..&#…...

编程日记 2024/8/3 9:55:46

浅谈几个常用OJ的注册方式

众所周知，好的OJ是成功的一半，但是有些英文OJ的注册很让人伤脑筋。 CodeForces 点进官网戳这里然后就会进入这个页面在这一页里面里填写好信息即可最后，一个邮件就会发到你的邮箱上，点击其中的链接即可激活账号 AtCoder …...

编程日记 2024/8/3 9:53:43

Html实现全国省市区三级联动

目录前言 1.全国省市区的Json数据 2.找到Json数据文件(在此博文绑定资源)之后，放到resource目录下。 3.通过类加载器加载资源文件，读取Json文件 3.1 创建JsonLoader类 3.2 注入JsonLoader实体，解析Json文件 4.构建前端Html页面 5.通过…...

编程日记 2024/8/3 9:50:40

前端构建工具Webpack 与 Vite 大对比

在现代前端开发领域，构建工具扮演着至关重要的角色。它们不仅可以帮助我们管理项目依赖关系，还可以优化我们的代码，使其在生产环境中运行得更快更高效。其中两个最受欢迎的构建工具就是 Webpack 和 Vite。在这篇文章中，我们将深入…...

编程日记 2024/8/3 9:48:39

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⽂件（注…...

编程日记 2024/8/3 9:47:38

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。目录【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

FFmpeg 低延迟同屏方案

引言在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

Day131 | 灵神 | 回溯算法 | 子集型子集

Day131 | 灵神 | 回溯算法 | 子集型子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2026/1/23 12:37:51

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...

编程新知 2026/1/23 4:56:05

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2026/2/4 23:29:22

相机从app启动流程

一、流程框架图二、具体流程分析 1、得到cameralist和对应的静态信息目录如下：重点代码分析：启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/31 5:09:19

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums，返回数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积。题目数据保证数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位整数范围内。请不要使用除法，且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2026/2/6 11:54:58

面向无人机海岸带生态系统监测的语义分割基准数据集

描述：海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而，目前该领域仍面临一个挑战，即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2026/1/25 14:15:52

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 ） 缓存工作原理分析在了解了本地缓存和远程缓存之后，我们来探究缓存是如何工作的。以计算文件的哈希串为例，若后续运行任务时文件哈希串未变，系统会直接使用对应的输出和制品文件。 2 …...

编程新知 2025/12/15 8:20:48