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

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

news 2025/8/23 16:17:34

引言

为什么存在？

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/8/23 9:15:44

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/8/14 5:51:59

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/7/9 6:14:15

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/8/23 0:28:26

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/8/9 23:42:13

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/7/6 12:42:16

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2025/8/22 4:58:43

uniapp 小程序 学习（一）

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

编程新知 2025/8/22 5:27:09

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

编程新知 2025/7/6 5:23:51

在Zenodo下载文件 用到googlecolab googledrive

方法&#xff1a;Figshare/Zenodo上的数据/文件下载不下来&#xff1f;尝试利用Google Colab &#xff1a;https://zhuanlan.zhihu.com/p/1898503078782674027 参考&#xff1a; 通过Colab&谷歌云下载Figshare数据&#xff0c;超级实用&#xff01;&#xff01;&#xff0…...

编程新知 2025/8/23 6:05:39