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

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

news 2025/11/4 10:48:11

引言

为什么存在？

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

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/8/26 18:00:13

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/10/21 3:50:52

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/10/30 13:53:32

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/11/1 20:53:34

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/11/3 0:30:09

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/9/17 22:26:02

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2025/11/3 20:52:48

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2025/11/3 2:51:56

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

编程新知 2025/10/30 0:20:10

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

题目描述 给定一个整型数组，请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3，则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组，0<数组长度<= 100，0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

编程新知 2025/9/21 23:43:15