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

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

news 文章来源：https://blog.csdn.net/m0_68823256/article/details/140878422 2025/4/3 15:15:24

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

嵌入式学习---DAY17：共用体与位运算

链表剩余的一些内容 一、共用体 union 共用体名 名称首字母大写 { 成员表列&#xff1b; }&#xff1b; union Demo {int i;short s;char c; }; int main(void) {union Demo d;d.i 10;d.s 100;d.c 200;printf("%d\n", sizeof(d)); /…...

编程日记 2024/8/3 9:45:36

蓝牙网关和蓝牙MESH总结

可参考&#xff1a; https://zhuanlan.zhihu.com/p/695144946 蓝牙网关 参考&#xff1a; https://www.bilibili.com/read/cv28872282/ 蓝牙网关是一种特殊的网络设备&#xff0c;它能够实现蓝牙设备与互联网或其他类型网络之间的数据传输和通信。通过蓝牙网关&#xff0c;用户…...

编程日记 2024/8/3 9:44:35

了解关于标准化的知识

1.标准化组织 1.1国家标准化管理委员会(Standardization Administration of the Peoples Republic of China&#xff0c;简称SAC) TC--(Technical Committee) 技术委员会. SAC/TC,就是“国家标准化管理委员会”下属的一个专项或一个行业的“技术委员会或技术小组”&a…...

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

【云原生】数据库忘记密码怎么办？

相信很多人都会遇到在虚拟机中忘记数据库密码的情况&#xff0c;想必大家都很苦恼&#xff0c;所以今天给大家来讲讲数据库忘记密码了如何修改密码再登录数据库&#xff01;&#xff01;&#xff01; 1、关闭数据库服务 systemctl stop mariadb 2、执行MySQL 服务器在启动时跳…...

编程日记 2024/8/3 9:42:32

Postman 接口测试详解

Postman 接口测试详解 Postman 接口测试详解1. Postman 基础知识1.1 什么是 Postman&#xff1f;1.2 Postman 的主要功能 2. 安装与设置2.1 安装 Postman2.2 创建 Postman 账户 3. Postman 的基本操作3.1 创建和发送请求3.2 解析响应数据3.3 使用环境和变量 4. 进阶功能4.1 编写…...

编程日记 2024/8/3 9:41:31

【JavaEE】线程状态

目录 前言 一.线程状态图 二.线程状态 1.初始状态(NEW) 2.运行状态(RUNNING) 3.等待状态&#xff08;WAITING) 4.超时等待&#xff08;TIMED_WAITING) 5.阻塞状态&#xff08;BLOCKED) 6.终止状态(TERMINATED) 三.线程状态间的转换 四.总结 前言 线程状态及其状态转换…...

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

C++笔记之编译过程和面向对象

回顾&#xff1a; “abcd”//数据类型 字符串常量 const char *p"abc"; new STU const char *//8 指针的内存空间 int float 指针的内存空间 p 指针指向的内存空间 "abc" 取决于字符串长度 指针变量的内容一级指针 指针变量的地址二级指针 …...

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

ModuleNotFoundError: No module named ‘tqdm‘

报错信息&#xff1a; tqdm是一个快速、可扩展的Python进度条库&#xff0c;用于展示迭代器的长循环执行进度。 解决&#xff1a;通过以下命令安装 使用conda命令安装 conda install tqdm使用pip安装&#xff1a; pip install tqdm...

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

东京电影节公布2024年竞赛片评审团成员并对其业绩分别进行评介 没什么含金量

第37届东京国际电影节竞赛单元评审团名单正式公布。 周五&#xff0c;电影节组织者宣布&#xff0c;香港电影制片人杜琪峰、匈牙利电影制片人伊尔迪科恩耶迪、日本女演员桥本爱和法国女演员基娅拉马斯楚安尼将与之前宣布的评审团主席梁朝伟一起担任 2024 年主竞赛评审团成员。 …...

编程日记 2024/8/3 9:36:26

智能景区垃圾识别系统：基于YOLO的深度学习实现

基于深度学习的景区垃圾识别系统&#xff08;UI界面YOLOv8/v7/v6/v5代码训练数据集&#xff09; 1. 引言 景区垃圾识别是环保管理的重要任务之一。传统的人工清理方式效率低、成本高&#xff0c;而借助深度学习技术可以实现自动化的垃圾检测与识别&#xff0c;提高景区的清洁…...

编程日记 2024/8/3 9:35:25