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

超详细的flex教程（面试必考）

news 2025/12/19 13:47:36

引言

为什么存在？

Flex 布局的出现是为了解决传统 CSS 布局方式（如浮动布局、定位布局等）在处理复杂布局时的诸多限制和不便。

优势
1. 简化布局

Flex 布局的语法简洁明了，代码更易读。

2. 强大的对齐能力

提供丰富的对齐属性，如 justify-content 和 align-items，轻松实现元素的对齐。

3. 响应式设计

天生支持响应式设计，元素可以根据屏幕大小自动调整。

4. 解决传统布局难题

垂直居中

Flex 布局的基本概念

Flex 容器（Flex Container）与 Flex 项目（Flex Item）

在 Flex 布局中，最基本的概念是 Flex 容器和 Flex 项目。

  • Flex 容器（Flex Container）：这是应用了 display: flex 或 display: inline-flex 的元素。它是所有 Flex 项目的父元素，负责控制其子元素的布局。

  • Flex 项目（Flex Item）：这是 Flex 容器的直接子元素。Flex 项目会按照 Flex 容器设置的属性进行排列和对齐。

display: flex 与 display: inline-flex 的区别

display: flex 和 display: inline-flex 都用于定义一个 Flex 容器，但它们在布局上有一些区别：

  • display: flex：将元素定义为块级 Flex 容器。这意味着容器会占据其父容器的整个宽度（除非设置了宽度），并且每个 Flex 容器都会在新行开始。

  • display: inline-flex：将元素定义为行内 Flex 容器。这意味着容器只会根据其内容的大小来占据宽度，并且多个行内 Flex 容器可以排列在同一行中。

Flex 容器与项目的层级关系

Flex 容器和 Flex 项目之间存在层级关系：

1.Flex 容器：作为父元素，负责控制其子元素的布局。它可以设置各种 Flex 属性来影响子元素的排列和对齐。

2.Flex 项目：作为子元素，直接受到 Flex 容器的影响。它们会按照 Flex 容器的设置进行排列和对齐。

示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>/* .flex-container {display: flex; background-color: #f0f0f0;padding: 10px;}
​.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;flex: 1;  } */.flex-container{display: flex;background-color: pink;padding: 10px;}.flex-item {background-color: green;color: white;padding: 20px;margin: 5px;text-align: center;flex: 1;/* max-width: 100px; 扩展，限制最大宽*/}</style>
</head>
<body>
​
<div class="flex-container"><div class="flex-item">项目 1</div><div class="flex-item">项目 2</div><div class="flex-item">项目 3</div>
</div>
​
</body>
</html>

在这个示例中：

  • .flex-container 是 Flex 容器，设置了 display: flex。

  • .flex-item 是 Flex 项目，直接受到 Flex 容器的控制。

通过调整 Flex 容器的属性，可以控制 Flex 项目的排列和对齐。例如，设置 flex-direction 可以改变项目的排列方向，设置 justify-content 可以控制项目在主轴上的对齐方式，设置 align-items 可以控制项目在交叉轴上的对齐方式。

主轴和交叉轴

在 Flex 布局中，主轴和交叉轴是定义元素排列方式的两个关键概念：

  • 主轴（Main Axis）：是 Flex 项目排列的主要方向，可以通过 flex-direction 设置为水平（默认从左到右）或垂直。

  • 交叉轴（Cross Axis）：与主轴垂直的方向，取决于主轴的方向设置。例如，当主轴为水平时，交叉轴为垂直方向。

设置主轴方向：flex-direction

flex-direction 控制 Flex 容器的主轴方向，有四种取值：

  • row（默认）：主轴为水平方向，起点在左。

    css复制代码.flex-container {display: flex;flex-direction: row;
}

  • row-reverse：主轴为水平方向，起点在右。

    css复制代码.flex-container {display: flex;flex-direction: row-reverse;
}

  • column：主轴为垂直方向，起点在上。

    css复制代码.flex-container {display: flex;flex-direction: column;
}

  • column-reverse：主轴为垂直方向，起点在下。

    css复制代码.flex-container {display: flex;flex-direction: column-reverse;
}
控制换行：flex-wrap

flex-wrap 控制 Flex 项目是否换行：

  • nowrap（默认）：不换行，所有项目都在一行/列。

    css复制代码.flex-container {display: flex;flex-wrap: nowrap;
}

  • wrap：允许换行，项目会自动换到下一行/列。

    css复制代码.flex-container {display: flex;flex-wrap: wrap;
}

  • wrap-reverse：换行方向相反。

    css复制代码.flex-container {display: flex;flex-wrap: wrap-reverse;
}
主轴对齐：justify-content

justify-content 控制项目在主轴上的对齐方式：

  • flex-start：在主轴起点对齐（默认）。

  • flex-end：在主轴终点对齐。

  • center：在主轴中心对齐。

  • space-between：均匀分布，第一个项目在起点，最后一个项目在终点。

  • space-around：均匀分布，每个项目两侧间距相等。

示例：

css复制代码.flex-container {display: flex;justify-content: center;
}
交叉轴对齐：align-items

align-items 控制项目在交叉轴上的对齐方式：

  • flex-start：在交叉轴起点对齐。

  • flex-end：在交叉轴终点对齐。

  • center：在交叉轴中心对齐。

  • baseline：在项目文本基线对齐。

  • stretch（默认）：项目拉伸以填满容器。

示例：

css复制代码.flex-container {display: flex;align-items: center;
}
综合使用

通过组合 flex-direction、flex-wrap、justify-content 和 align-items 等属性，可以轻松实现各种复杂的布局需求，使得 Flex 布局在现代布局中极具灵活性和实用性。

Flex 布局的项目属性

Flex 布局提供了多个属性来控制 Flex 项目的行为和布局。以下是一些常用的项目属性：

1. order：控制项目的排列顺序

order 属性用于定义 Flex 项目在 Flex 容器中的排列顺序。默认情况下，所有项目的 order 值都是 0。数值越小，项目排列越靠前。

.item {order: <integer>; /* 默认值为 0 */
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;background-color: #f0f0f0;padding: 10px;}
​.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;}
​.item1 {order: 3;}
​.item2 {order: 1;}
​.item3 {order: 2;}</style>
</head>
<body>
​
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
​
</body>
</html>

在这个示例中，item2 的 order 值最小，所以它会排在最前面。

2. flex-grow：定义项目的放大比例

flex-grow 属性用于定义 Flex 项目在容器中有剩余空间时的放大比例。默认值为 0，即不放大。

.item {flex-grow: <number>; /* 默认值为 0 */
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;background-color: #f0f0f0;padding: 10px;}
​.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;flex-grow: 1;}
​.item2 {flex-grow: 2;}</style>
</head>
<body>
​
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
​
</body>
</html>

在这个示例中，item2 的 flex-grow 值是 2，而其他项目的 flex-grow 值是 1，所以 item2 会占据更多的空间。

3. flex-shrink：定义项目的缩小比例

flex-shrink 属性用于定义 Flex 项目在容器空间不足时的缩小比例。默认值为 1，即项目会根据需要缩小。

.item {flex-shrink: <number>; /* 默认值为 1 */
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;background-color: #f0f0f0;padding: 10px;}
​.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;flex-shrink: 1;}
​.item2 {flex-shrink: 0;}</style>
</head>
<body>
​
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
​
</body>
</html>

在这个示例中，item2 的 flex-shrink 值是 0，所以它不会缩小，而其他项目会根据需要缩小。

4.flex-basis：定义项目的初始尺寸

flex-basis 属性用于定义 Flex 项目在主轴方向上的初始尺寸。它可以设置为长度值（如 px, em, %）或 auto。默认值为 auto，即项目的尺寸由内容决定。

.item {flex-basis: <length> | auto; /* 默认值为 auto */
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;background-color: #f0f0f0;padding: 10px;}
​.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;flex-basis: 100px;}</style>
</head>
<body>
​
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
​
</body>
</html>

在这个示例中，所有项目的初始尺寸都是 100px。

5. align-self：单独设置项目在交叉轴上的对齐方式

align-self 属性用于单独设置 Flex 项目在交叉轴上的对齐方式。它会覆盖 Flex 容器的 align-items 属性。默认值为 auto，即继承容器的 align-items 属性。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flex 布局示例</title><style>.flex-container {display: flex;align-items: center;background-color: #f0f0f0;padding: 10px;height: 200px;}
​.flex-item {background-color: #4CAF50;color: white;padding: 20px;margin: 5px;text-align: center;}
​.item2 {align-self: flex-end;}</style>
</head>
<body>
​
<div class="flex-container"><div class="flex-item item1">项目 1</div><div class="flex-item item2">项目 2</div><div class="flex-item item3">项目 3</div>
</div>
​
</body>
</html>

在这个示例中，item2 的 align-self 值是 flex-end，所以它会单独对齐到交叉轴的终点，而其他项目会按照容器的 align-items 属性对齐到交叉轴的中心。

总结

优势

简化布局实现

响应式设计

局限性

低端浏览器适配

相关文章：

超详细的flex教程（面试必考）

引言 为什么存在&#xff1f; Flex 布局的出现是为了解决传统 CSS 布局方式&#xff08;如浮动布局、定位布局等&#xff09;在处理复杂布局时的诸多限制和不便。 优势 1. 简化布局 Flex 布局的语法简洁明了&#xff0c;代码更易读。 2. 强大的对齐能力 提供丰富的对齐属…...

编程日记 2024/10/31 23:16:18

C++的输入与输出

一.格式和注意要点 1. #include<iostream>; using namespace std; 标准库定义了4个IO对象&#xff0c;IO(输入输出)&#xff0c;以下&#xff1a; cin是一个istream流对象&#xff0c;现在理解为标准输入即可。cout是一个ostream流对象&#xff0c;理解为标准输出即可。…...

编程日记 2024/10/31 23:12:13

上海剧某文化传播有限公司与喜某（上海）网络科技有限公司、上海喜某科技有限公司侵害著作权及不正当竞争纠纷案

上海剧某文化传播有限公司与喜某&#xff08;上海&#xff09;网络科技有限公司、上海喜某科技有限公司侵害著作权及不正当竞争纠纷案的详细情况如下&#xff1a; 基本案情&#xff1a; 上海剧某文化传播有限公司&#xff08;以下简称剧某公司&#xff09;是电视剧《宸汐缘》的…...

编程日记 2024/10/31 23:08:10

【c++篇】：模拟实现string类--探索字符串操作的底层逻辑

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨ 个人主页&#xff1a;余辉zmh–CSDN博客 ✨文章所属专栏&#xff1a;c篇–CSDN博客 文章目录 前言一.string类的默认成员函数以及深拷贝1.基本框架2.默认成员函数…...

编程日记 2024/10/31 23:06:06

springboot配置logback.xml遇到的几个问题

最近项目用到对日志脱敏&#xff0c;经过研究通过logback实现了对日志脱敏&#xff0c;上篇文章中详细讲解了如果配置。但是还是对logback的配置不太了解。比如springboot怎么加载这个logback.xml的。 首先&#xff0c;默认情况下&#xff0c;logback.xml文件是放在类目录下&am…...

编程日记 2024/10/31 23:05:05

MySQL 5.7与MySQL 8.0对比

一、功能对比 JSON支持 MySQL 5.7&#xff1a;引入了JSON数据类型&#xff0c;允许用户存储和操作JSON格式的数据&#xff0c;这是NoSQL功能的一个重要补充。但相对于MySQL 8.0&#xff0c;其功能和性能较弱。MySQL 8.0&#xff1a;在JSON支持方面进行了重大改进&#xff0c;引…...

编程日记 2024/10/31 23:04:05

【代码随想录Day55】图论Part07

prim 算法精讲 题目链接/文章讲解&#xff1a;代码随想录 import java.util.*;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);// 读取顶点数和边数int vertexCount scanner.nextInt();int edgeCount scanner.nextI…...

编程日记 2024/10/31 23:03:04

软考在即!这些注意事项你提前了解！

11月软考马上就要开始了&#xff0c;但是&#xff0c;还有很多的考生&#xff0c;可能还不知道自己到底应该去了解些什么&#xff1f;本文将详细介绍机考注意事项及系统操作提示&#xff0c;帮助考生们备考无忧。 一、考试入场要求和考场规则 1、入场时间&#xff1a;考生需提…...

编程日记 2024/10/31 23:02:02

CMake知识点

参考&#xff1a; https://zhuanlan.zhihu.com/p/661284252 cmake使用教程&#xff08;实操版&#xff09;-CSDN博客 【CMake】CMake从入门到实战系列&#xff08;二&#xff09;——实例入手&#xff0c;讲解CMake的基本流程_cmake创建一个可执行目标的过程-CSDN博客 一、…...

编程日记 2024/10/31 23:01:02

git ls-remote

文章目录 1.简介2.格式3.选项4.示例5.小结参考文献 1.简介 git ls-remote 是一个 Git 命令&#xff0c;用于列出远程 Git 仓库的引用&#xff08;refs&#xff09;&#xff0c;包括分支、标签等。 这个命令非常有用&#xff0c;可以帮助你查看远程仓库中可用的分支和标签&…...

编程日记 2024/10/31 23:00:01

低代码平台如何通过AI赋能，实现更智能的业务自动化？

引言 随着数字化转型的加速推进&#xff0c;企业在日常运营中面临的业务复杂性与日俱增。如何快速响应市场需求&#xff0c;优化流程&#xff0c;并降低开发成本&#xff0c;成为各行业共同关注的核心问题。低代码平台作为一种能够快速构建应用程序的工具&#xff0c;因其可视化…...

编程日记 2024/10/31 22:58:59

计算疫情扩散时间

该专栏题目包含两部分&#xff1a; 100 分值部分题目 200 分值部分题目 所有题目都会陆续更新&#xff0c;订阅防丢失 题目描述 在一个地图中(地图由 N ∗ N N*N N∗N 个区域组成)&#xff0c;有部分区域被感染病菌。 感染区域每天都会把周围(上下左右)的4个区域感染。 请…...

编程日记 2024/10/31 22:50:47

【Windows11】24H2 内存占用高（截至10月31日）

文章目录 一、问题二、解决三、原因 一、问题 系统版本&#xff1a; 内存只有32GB。 以前只有我在运行数据处理程序的时候内存占用才会很高&#xff0c;日常情况下应该只有40%、50%左右的。 但是24H2&#xff0c;日常情况下内存占用80%以上。 而我只开了很少的应用&#…...

编程日记 2024/10/31 22:45:42

题目：多个字符从两端移动，向中间汇聚

【多个字符从两端移动&#xff0c;向中间汇聚】 char arr1[] "Good Good Study,Day Day Up!" ; char arr2[] "***************************"; 【思路】 首先两字符串中的元素个数要相同&#xff0c;将两串字符分别存放在数组中&#xff0c;那么字符串中…...

编程日记 2024/10/31 22:43:40

前端如何安全存储密钥，防止信息泄露

场景 把公钥硬编码在前端代码文件里&#xff0c;被公司安全检测到了要整改&#xff0c;于是整理几种常见的前端密钥存储方案。 1. 设置环境变量再读取 在打包或部署前端应用时&#xff0c;可以将密钥配置为环境变量&#xff0c;在应用运行时通过环境变量读取密钥。这样可以将密…...

编程日记 2024/10/31 22:42:39

银行电子户分账解决电商行业哪些问题

随着电子商务的快速发展&#xff0c;电商银行电子户分账作为金融科技领域的重要一环&#xff0c;逐渐成为现代金融业务的核心。本文将详细探讨电商银行电子户分账的原理、操作流程、安全措施以及在电子商务中的重要作用。 二、电商银行电子户分账的基本概念 电商银行电子户分…...

编程日记 2024/10/31 22:40:37

Web音乐库：SpringBoot实现的音乐网站

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…...

编程日记 2024/10/31 22:38:35

Rust： 加密算法库 ring 如何用于 RSA 数字签名？

本来用 rsa 库基本搞定&#xff0c;但文心一言建议改用 ring 库。原因是 rsa 库已经放弃维护&#xff0c;而 ring 库性能公认很好。但是如何进行 RSA 数字签名&#xff0c;网上几乎查不到这方面材料。仔细查看了 ring 库的源代码和代码注释&#xff0c;终于完成趟坑。总结一下供…...

编程日记 2024/10/31 22:37:34

Matplotlib 网格线

Matplotlib 网格线 Matplotlib 是一个强大的 Python 绘图库&#xff0c;广泛用于数据可视化。在 Matplotlib 中&#xff0c;网格线是一种常用的辅助工具&#xff0c;用于增强图表的可读性和美观性。本文将详细介绍如何在 Matplotlib 中添加和使用网格线。 1. 简介 网格线是在…...

编程日记 2024/10/31 22:35:31

钉钉机器人禅道消息通知@指派人

钉钉、禅道怎么设置webhook&#xff1f; 点击查看&#xff1a;获取自定义机器人 Webhook 地址 在禅道上配置钉钉机器人webhook&#xff0c;使用管理员账号登录&#xff0c;找到通知设置 添加webhook 添加webhook所需要的数据即可 webhook设置&#xff0c;根据自己的实际…...

编程日记 2024/10/31 22:32:29

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/12/18 16:42:42

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/12/18 13:24:18

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/12/16 2:43:58

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/12/12 7:18:42

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2025/12/14 15:44:56

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/12/17 16:37:05

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/12/4 3:48:38

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/12/17 4:16:13

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/12/16 18:27:37

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/12/17 20:13:49