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

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

news 文章来源：https://blog.csdn.net/a3098448071/article/details/143417520 2025/5/16 11:19:33

引言

为什么存在？

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;小伙伴们问是不是赚翻了&#xff1f; 大家好&#xff0c;我是码哥。我的新书《Redis 高手心法》出版后&#xff08;2024 年 8 月份出版&#xff09;&#xff0c;有一些小伙伴问了我一些问题&#xff1a; 写书是不是赚了很多钱&#xff1f;我也想写…...

编程日记 2024/10/31 22:30:27

【福建医科大学附属第一医院-注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞 …...

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

第二届新生程序设计竞赛热身赛(C语言）

A:饥饿的XP XP迷失在X星球&#xff0c;他醒来时已经很久很久很久没有吃过东西了。他突然发现身边有一张地图&#xff0c;上面有X星球上每一个食物供给点的位置。太好了&#xff0c;XP跳了起来。他决定先把肚子填饱再去寻找其他伙伴。现在已知XP的位置(X, Y)&#xff0c;以及他的…...

编程日记 2024/10/31 22:28:24

WebSocket和HTTP请求的区别

1. 连接方式 HTTP请求&#xff1a;基于“请求-响应”模式。每次通信都要重新建立连接&#xff0c;客户端发送请求后服务器返回响应&#xff0c;连接就断开了。这种模式通常适合不频繁更新的数据&#xff0c;如静态页面的加载。WebSocket&#xff1a;支持长连接&#xff0c;连接…...

编程日记 2024/10/31 22:27:21

【Python · Pytorch】人工神经网络 ANN（中）

【Python Pytorch】人工神经网络 ANN&#xff08;中&#xff09; 6. 反向传播6.1 梯度下降法6.1.1 线搜索方法6.1.2 微分 & 导数6.1.3 偏导数6.1.4 Jacobian矩阵6.1.5 梯度 & 梯度下降法按维度介绍 6.1.6 面临挑战平原现象 & 振荡现象局部最小值鞍点梯度消失梯度爆…...

编程日记 2024/10/31 22:26:19

穷举vs暴搜vs深搜vs回溯vs剪枝 算法专题

一. 全排列 全排列 class Solution {List<List<Integer>> ret;List<Integer> path;boolean[] check;public List<List<Integer>> permute(int[] nums) {ret new ArrayList<>();//存放结果path new ArrayList<>();存放每个路径的…...

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

Uni-App-02

条件编译 条件编译概念 不同的运行平台终归有些专有的特性&#xff0c;无法实现跨平台完全兼容&#xff0c;例如&#xff1a;微信小程序导航栏右上角的关闭图标。 uni-app提供了一种“条件编译”机制&#xff0c;可以针对特定的平台编译执行特定的代码&#xff0c;否则不执行。…...

编程日记 2024/10/31 22:19:13

在做题中学习（72）：最小栈

解法&#xff1a;pair<int,int>解决 思路&#xff1a;stack里存pair&#xff0c;push时&#xff0c;first存当前值&#xff0c;而每次push都要更新pair的second&#xff0c;使它成为更小值&#xff0c;最后的getmin&#xff0c;只用取top().second即可拿到最小值。 cla…...

编程日记 2024/10/31 22:18:12

详解软件设计中分库分表的几种实现以及应用示例

详解软件设计中分库分表的几种实现以及应用示例https://mp.weixin.qq.com/s?__bizMzkzMTY0Mjc0Ng&mid2247485108&idx1&sn8b3b803c120c163092c70fa65fe5541e&chksmc266aaa1f51123b7af4d7a3113fe7c25daa938a04ced949fb71a8b7773e861fb93d907435386#rd...

编程日记 2024/10/31 22:16:09

随着飞行汽车的亮相，在环保方面有什么保护措施吗

飞行汽车具备环保潜力&#xff0c;采用电动或混合动力系统减少污染&#xff0c;并拓展应用场景。多家企业布局&#xff0c;沃飞长空作为国内eVTOL(电动垂直起降航空器)研发的领先企业&#xff0c;在环保这一点做的非常到位&#xff0c;AE200采用纯电动力系统,零碳排放,静默飞行…...

编程日记 2024/10/31 22:14:08