Flex布局详解

article/2025/9/13 20:53:21

Flex 布局详解

一、入门

1. flex 是什么？

  • flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思

2. 为什么我们需要 flex?

  • 解决元素居中问题

  • 自动弹性伸缩，合适适配不同大小的屏幕，和移动端

3.flex 常见术语 三个2

序号简记术语
1二成员容器和项目(container / item)
2二根轴主轴与交叉轴(main-axis / cross-axis)
3二根线起始线(main/cross-start)与结束线（main/cross-end)

img

二、容器 container 的属性

外面的大容器的属性的设置

1. flex-direction   主轴方向
2. flex-wrap        主轴一行满了换行
3. flex-flow        1和2的组合
4. justify-content  主轴元素对齐方式
5. align-items      交叉轴元素对齐方式//单行
6. align-content    交叉轴行对齐方式//多行

1.flex-direction 主轴方向

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

image-20210331195635185

image-20210331195724739

image-20210331195803337

image-20210331195911522

code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
.container{display: flex;height: 600px;background-color: rgb(219, 219, 219);
}
.container{flex-direction: row;/* flex-direction: row-reverse; *//* flex-direction: column; *//* flex-direction: column-reverse; */
}
.item{padding: 100px;
}
</style>
<body><div class="container"><div class="item" style="background-color: antiquewhite;">1</div><div class="item" style="background-color: aqua;">2</div><div class="item" style="background-color: aquamarine;">3</div></div>
</body>
</html>

2. flex-wrap 主轴一行满了换行

nowrap (默认值) 不换行压缩宽度
wrap    换行
wrap-reverses 反向换行

image-20210331200420335

image-20210331200527014 image-20210331200656686

code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
.container{display: flex;height: 600px;background-color: rgb(219, 219, 219);
}
.container{/* flex-wrap: nowrap; */flex-wrap: wrap;/* flex-wrap: wrap-reverse; */
}
.item{padding: 100px;
}
</style>
<body><div class="container"><div class="item" style="background-color: antiquewhite;">1</div><div class="item" style="background-color: aqua;">2</div><div class="item" style="background-color: aquamarine;">3</div><div class="item" style="background-color: #aaff00;">4</div><div class="item" style="background-color: #ffff00;">5</div></div>
</body>
</html>

3. flex-flow 1和2的组合

flex-low: [flex-direction] [flex-wrap]

就是 1 和 2 的组合，简写，同上，这里不赘述.

4.justify-content 主轴元素对齐方式

这里是元素的对齐，区别于刚刚的「方向」

flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
flex-end   靠着main-end对齐//参考常见术语(一般是右方向)
center     靠着主轴居中对齐//一般就是居中对齐
space-between 两端对齐，靠着容器壁，剩余空间平分
space-around  分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly  平均对齐，不靠着容器壁，剩余空间平分

image-20210331201947030

image-20210331202028245

image-20210331202106687

image-20210331202149205

image-20210331202241366

image-20210331202332871

code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
.container{display: flex;height: 600px;background-color: rgb(219, 219, 219);
}
.container{/* justify-content: flex-start; *//* justify-content: flex-end; *//* justify-content: center; *//* justify-content: space-between; *//* justify-content: space-around; */justify-content: space-evenly;
}
.item{padding: 100px;
}
</style>
<body><div class="container"><div class="item" style="background-color: antiquewhite;">1</div><div class="item" style="background-color: aqua;">2</div><div class="item" style="background-color: aquamarine;">3</div></div>
</body>
</html>

5.align-items item「项目」在交叉轴上对齐方式「单轴」

这个是 container 容器的属性，设置的是 items 项目元素在交叉轴上对齐样式

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。

image-20210331202806289

image-20210331202841120

image-20210331202915627

image-20210331203018581

（一般用不着，本来就在一条直线上）

image-20210331203130876

伸展，就是会填充宽度

6. align-content 交叉轴行对齐方式 多行

这个和 justify-content 属性一模一样，

justify-conent，align-items，align-content 都极度相似.

flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
flex-end   （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
center     (每一行)靠着cross线居中对齐//一般就是居中对齐
space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
space-around  (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
strentch      (每一行)伸缩，占满整个高度

image-20210331204122090

image-20210331204205734

image-20210331204303849

image-20210331204403783

image-20210331205003164

image-20210331205106522

code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
.container{display: flex;height: 800px;background-color: rgb(219, 219, 219);/* 因为需要多行，所以要换行 */flex-wrap: wrap;
}
.container{align-content: flex-start;/* align-content: flex-end; *//* align-content: center; *//* align-content: space-between; *//* align-content: space-around; *//* align-content: stretch; */}
.item{padding: 100px;
}
</style>
<body><div class="container"><div class="item" style="background-color: antiquewhite;">1</div><div class="item" style="background-color: aqua;">2</div><div class="item" style="background-color: aquamarine;">3</div><div class="item" style="background-color: #aaff00;">4</div><div class="item" style="background-color: #ffff00;">5</div></div>
</body>
</html>

三、项目元素 item 的属性

容器里面的子元素item「项目」的属性

flex-grow：长大
flex-shrinik: 缩小
align-self: 覆盖container align-items 属性
order 排序
flex-basis: 有效宽度

1.flex-grow 长大

  • 在容器主轴上存在剩余空间时, flex-grow才有意义

  • 该属性的值,称为放大因子, 常见的属性值如下:

序号属性值描述
10默认值不放大,保持初始值
2initial设置默认值,与0等效
3n放大因子: 正数

放大后的效果

image-20210331210642331

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
.container{display: flex;height: 800px;background-color: rgb(219, 219, 219);
}
.item{padding: 100px;
}
.item1{/* 其他的都是0，这一个是1，所以能所有剩下的空间都是item1的 */flex-grow: 1;
}</style>
<body><div class="container"><div class="item item1" style="background-color: antiquewhite;">1</div><div class="item" style="background-color: aqua;">2</div><div class="item" style="background-color: aquamarine;">3</div></div>
</body>
</html>

2. flex-shrinik: 缩小

  • 当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义
  • 该属性的值,称为收缩因子, 常见的属性值如下:
序号属性值描述
11默认值允许项目收缩
2initial设置初始默认值,与 1 等效
30禁止收缩,保持原始尺寸
4n收缩因子: 正数

示例:

image-20210331212509330

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
.container{display: flex;height: 800px;width: 400px;background-color: rgb(219, 219, 219);flex-direction: row;flex-wrap: nowrap;align-content: flex-start;
}
.item{width: 200px;height: 200px;font-size: 1.5rem;/* 禁止收缩 */flex-shrink: 0;
}
.item1{flex-shrink: 1;
}
.item2{flex-shrink: 0;
}
.item3{flex-shrink: 3;
}
/*  container 容器的宽度是 400,3个字元素总宽度是 600 超过了 200然后按照比例缩小到这些元素上 200/4 = 50item1 缩小 50 * 1 = 50,还剩 150item2 不缩小item3 缩小 50 * 3 = 150 还剩 50*/</style>
<body><div class="container"><div class="item item1" style="background-color: antiquewhite;">1</div><div class="item item2" style="background-color: aqua;">2</div><div class="item item3" style="background-color: aquamarine;">3</div></div>
</body>
</html>

3. align-self: 覆盖container align-items 属性

  • 该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式
序号属性值描述
1auto默认值继承 align-items 属性值
2flex-start与交叉轴起始线对齐
3flex-end与交叉轴终止线对齐
4center与交叉轴中间线对齐: 居中对齐
5stretch在交叉轴方向上拉伸
6baseline与基线对齐(与内容相关用得极少)

例子:

image-20210331213131744

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
.container{display: flex;height: 800px;background-color: rgb(219, 219, 219);flex-direction: row;flex-wrap: nowrap;
}
.container{/* container指定容器的对齐 flex-start */align-items: flex-start;
}
.item{width: 200px;height: 200px;
}
.item3{/* 元素3 item3 覆盖container的设置，flex-end */align-self: flex-end;
}</style>
<body><div class="container"><div class="item item1" style="background-color: antiquewhite;">1</div><div class="item item2" style="background-color: aqua;">2</div><div class="item item3" style="background-color: aquamarine;">3</div></div>
</body>
</html>

4. order 排序

image-20210331213812047

就是将元素重新排序

code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
.container{display: flex;height: 800px;background-color: rgb(219, 219, 219);
}.item{width: 200px;height: 200px;order: 0;
}
.item1{order: 3;
}</style>
<body><div class="container"><div class="item item1" style="background-color: antiquewhite;">1</div><div class="item item2" style="background-color: aqua;">2</div><div class="item item3" style="background-color: aquamarine;">3</div></div>
</body>
</html>

5. flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

参考:

Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

flex布局（主轴方向 、主轴项目对齐方式 、交叉轴项目对齐 、项目顺序 、项目独立对齐方向 ） - 前端 - php中文网博客


http://chatgpt.dhexx.cn/article/Iv0pUUc8.shtml

相关文章

SQL语句的解析过程

SQL语句的解析过程

于最近需要做一些sql query性能提升的研究&#xff0c;因此研究了一下sql语句的解决过程。在园子里看了下&#xff0c;大家写了很多相关的文章&#xff0c;大家的侧重点各有不同。本文是我在看了各种资料后手机总结的&#xff0c;会详细的&#xff0c;一步一步地讲述一个sql语句…
阅读更多...
SQL学习TASK06

SQL学习TASK06

section A 1.创建员工信息表&#xff1a; CREATE TABLE Employee (s_product_id char(4) NOT NULL, s_name VARCHAR(32) NOT NULL, s_salary INTEGER, s_department_id INTEGER); 创建部门信息表&#xff1a; CREATE TABLE department (d_id char(4) NOT NULL, d_name VARCHAR…
阅读更多...
MySQL高级SQL语句

MySQL高级SQL语句

目录 一、常用查询 1、按关键字排序 1.1 前期准备 1.2 升序、降序列出数据 1.3 找出其中南京的数据并以分数降序列出 1.4 查询学生信息先按兴趣id降序排列&#xff0c;相同分数的&#xff0c;id也按降序排列 1.5 查询学生信息先按兴趣id降序排列&#xff0c;兴趣id相同的…
阅读更多...
HANA 一些sql语句

HANA 一些sql语句

函数&#xff01;&#xff01; 时间函数&#xff1a;DAYS_BETWEEN、ADD_DAYS、FORMAT、CURRENT_DATE、YEAR、MONTH等。 字符串函数&#xff1a;CONCAT、TRIM、LENGTH、REPLACE、STRING_AGG、SUBSTRING等&#xff1b; 数字函数&#xff1a; ROUND、FLOOR、RAND、ABS等 视图&…
阅读更多...
SQL语句的封装

SQL语句的封装

本篇供个人学习使用&#xff0c;有问题欢迎讨论 封装SQL语句 ​ 在封装SQL语句之前&#xff0c;我们得知道什么是DAO封装与实体类以及JDBC工具类的封装与连接数据库的具体流程。 ​ 关于JDBC工具类的封装可以查看我的另一篇博文 JDBC工具类的封装 ​ 想了解具体的连接数据库…
阅读更多...
mysql sql delete语句_SQL Delete语句

mysql sql delete语句_SQL Delete语句

在本教程中，您将学习如何使用SQL DELETE语句删除表中的一行或多行。 1. SQL DELETE语句简介 要从表中删除一行或多行，请使用DELETE语句。 DELETE语句的一般语法如下： DELETE FROM table_name WHERE condition; 首先，提供要删除行的表名称(table_name)。 其次，在WHERE子句中…
阅读更多...
MySQL入门（5）——基于datagrip的SQL语句学习

MySQL入门（5）——基于datagrip的SQL语句学习

目录 一、什么是SQL二、SQL约束1、主键约束&#xff08;1&#xff09;添加主键约束方式一&#xff1a;创建表时&#xff0c;在字段描述处&#xff0c;声明指定字段为主键方式二&#xff1a;创建表时&#xff0c;在constraint约束区域&#xff0c;声明指定字段为主键方式三&…
阅读更多...
MySQL数据库增删改查及聚合查询SQL语句学习汇总

MySQL数据库增删改查及聚合查询SQL语句学习汇总

目录 数据库增删改查SQL语句 MySQL数据库指令 1.查询数据库 2.创建数据库 3.删除数据库 4.选择数据库 创建表table 查看所有表 创建表 查看指定表的结构 删除表 数据库命令进行注释 增删改查&#xff08;CRUD&#xff09;详细说明 增加 SQL库提供了关于时间的…
阅读更多...
第一部分_SQL查询语句学习

第一部分_SQL查询语句学习

第一部分 SQL查询语句的学习 单表查询 查询订购日期在1996年7月1日至1996年7月15日之间的订单的订购日期、订单ID、客户ID和雇员ID等字段的值 SELECT 订购日期,订单ID,客户ID,雇员ID FROM 订单 WHERE 订购日期 BETWEEN 1996-07-01 AND 1996-07-15 查询供应商的ID、公司名称、…
阅读更多...
了解RS-232、RS-485串口通信协议

了解RS-232、RS-485串口通信协议

文章目录 一、串口通信协议1、RS-232标准2、RS-485标准3、RS232、485电平与TTL电平的区别4、"USB/TTL转232"模块工作原理1、工作流程2、驱动 2、总结3、参考资料 一、串口通信协议 对于通信协议&#xff0c;我们可以分为两个层面进行理解&#xff0c;分别是物理层和…
阅读更多...
RS485通讯协议

RS485通讯协议

https://blog.csdn.net/qq_29344757/article/details/71516037 1. 硬件层协议 通讯协议主要是实现两个设备之间的数据交换功能&#xff0c;通讯协议分硬件层协议和软件层协议。硬件层协议决定数据如何传输问题&#xff0c;比如要在设备1向设备2发送0x63&#xff0c;0x63的二进…
阅读更多...
RS——485通讯协议

RS——485通讯协议

1、RS485通讯实验简介 RS485是一种工业控制环境中 常用的通讯协议&#xff0c;它具有抗干扰能力强、传输距离远的特点。485协议又232协议改进而来&#xff0c;协议层不变&#xff0c;只改进了物理层&#xff0c;因而保留了串口通讯协议应用简单的特点。 看图就知道了&#xf…
阅读更多...
485Modbus协议

485Modbus协议

1.RS485 1&#xff09;485通信 --差分传输 物理层&#xff1a; 通信引脚 A B 使用双绞线通信。 发送器&#xff1a; 逻辑1&#xff1a; A>B AB之间电压为2V~6V 逻辑0&#xff1a; A<B AB之间电压为-2V~-6V 接收器&#xff1a; 逻辑1&#xff1a; A>B AB之间电…
阅读更多...
带你认识什么是485通信

带你认识什么是485通信

在现代工业控制系统中&#xff0c;常常需要实现分布式控制&#xff0c;而分布式控制需要实现不同设备之间的通信。其中&#xff0c;485通信协议是一种被广泛使用的通信协议之一。 1. 介绍 A. 485通信的定义 485通信协议是一种串行通信协议&#xff0c;也被称为RS-485。它是由美…
阅读更多...
常见的通讯协议总结（USART、IIC、SPI、485、CAN）

常见的通讯协议总结（USART、IIC、SPI、485、CAN）

目录 一、通讯的基本概念1、串行通讯2、并行通讯3、串行通讯与并行通讯对比4、传输模式&#xff08;单工、半双工、全双工&#xff09; 二、USART—串口通讯1、物理层2、协议层&#xff08;1&#xff09;波特率&#xff08;2&#xff09;起始和停止信号&#xff08;3&#xff0…
阅读更多...
485通讯与MODBUS的区别与联系

485通讯与MODBUS的区别与联系

最近做智能检测的项目&#xff0c;设备、串口之间的通讯比较多&#xff0c;一会儿485&#xff0c;一会儿modbus RTU&#xff0c;有点晕了&#xff0c;这里重新梳理一下RS485、485通讯协议、ModBus通讯协议、Modbus Rtu通讯这几个点的联系和区别。 先说RS485吧&#xff0c;RS48…
阅读更多...
485通讯和modbus通讯协议

485通讯和modbus通讯协议

485通信&#xff1a; 采用差分信号&#xff1a;A比B电压高是1&#xff0c;A比B电压低是0&#xff0c;电压高低值在0.2V-6V之间。 硬件连接上&#xff1a;所有A接到一起&#xff0c;所有B接到一起AB之间要加匹配电阻100欧到1K之间。 485通讯配置时&#xff1a;先要使能发送TX…
阅读更多...
MODBUS通讯协议详解(基于485)

MODBUS通讯协议详解(基于485)

参考&#xff1a;灵育科技Modbus课程总结 作者&#xff1a;Naunyang 时间&#xff1a;2020-11-23 13:51:58 网址&#xff1a;https://blog.csdn.net/Naunyang/article/details/108740456?spm1001.2014.3001.5502 参考&#xff1a;MODBUS用于单片机通讯 作者&#xff1a;hillch…
阅读更多...
485通讯协议_终于有人把RS485通讯协议应用及缺点分析清楚了，看完收获多多

485通讯协议_终于有人把RS485通讯协议应用及缺点分析清楚了，看完收获多多

RS-485是工业控制环境中常用的通信协议&#xff0c;具有抗干扰能力强、传输距离长的特点。RS-485通信协议是对RS-232协议的改进。协议层不变&#xff0c;但只有物理层得到了改进&#xff0c;从而保留了串行通信协议应用简单的特点。 RS-232和RS-485的特性的不同 典型的串行通信…
阅读更多...
Linux初学者必知的5个学习网站

Linux初学者必知的5个学习网站

1 推荐一&#xff1a;鸟哥的Linux私房菜&#xff08;http://vbird.dic.ksu.edu.tw/&#xff09; 这个不用多说吧&#xff0c;只要你学习Linux就肯定听说过鸟哥的私房菜&#xff0c;经典&#xff0c;对于初学者来说绝对是经典&#xff0c;推荐&#xff01;&#xff01;&#xff…
阅读更多...
推荐文章

Copyright @ 2022~2023