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

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

news 2026/2/8 0:47:19

一：什么是弹性布局-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）

一&#xff1a;什么是弹性布局-Flex flex 是 Flexible Box 的缩写&#xff0c;意为"弹性布局"&#xff0c;用来为盒状模型提供最大的灵活性。 语法&#xff1a; .box{display: flex; } .box{display: inline-flex; } 注意&#xff0c;设为 Flex 布局以后&#xff0…...

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

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

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

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

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

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

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

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

Python 后台开发中&#xff0c;获取返回的类方法&#xff0c;以及状态码类的实现 代码备份 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: 下载得到&#xff1a;TensorRT-10.2.0.19.Linux.x86_64-gnu.cuda-11.8.tar.gz 3: 下载后配置环境变量&#xff0c;上面地址记得改成真实地址。 4: 如果想python使用tensorrt&#xff0c;那么 解压后目录&#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

新质生产力

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

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

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

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

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

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

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

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

原始的原型链是怎样玩的

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

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

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

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

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

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

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

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

z3基础学习

z3基础学习 ​ z3是一个微软出品的开源约束求解器&#xff0c;能够解决很多种情况下的给定部分约束条件寻求一组满足条件的解的问题。 安装&#xff1a;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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

编程日记 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⽂件&#xff08;注…...

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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2026/2/7 23:18:31

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/31 12:52:29

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2026/2/2 3:06:53

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2026/2/6 1:18:56

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

编程新知 2026/2/7 0:29:10

路由基础-路由表

本篇将会向读者介绍路由的基本概念。 前言 在一个典型的数据通信网络中&#xff0c;往往存在多个不同的IP网段&#xff0c;数据在不同的IP网段之间交互是需要借助三层设备的&#xff0c;这些设备具备路由能力&#xff0c;能够实现数据的跨网段转发。 路由是数据通信网络中最基…...

编程新知 2026/2/4 13:41:16

基于stm32F10x 系列微控制器的智能电子琴（附完整项目源码、详细接线及讲解视频）

注&#xff1a;文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件&#xff1a;STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...

编程新知 2026/1/26 9:04:42

【QT控件】显示类控件

目录 一、Label 二、LCD Number 三、ProgressBar 四、Calendar Widget QT专栏&#xff1a;QT_uyeonashi的博客-CSDN博客 一、Label QLabel 可以用来显示文本和图片. 核心属性如下 代码示例: 显示不同格式的文本 1) 在界面上创建三个 QLabel 尺寸放大一些. objectName 分别…...

编程新知 2026/2/4 18:27:37