CSS flex布局
# Flex布局语法
# 一、Flex 布局是什么？
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器 都可以指定为 Flex 布局。
.box {
display: flex;
}
2
3
行内元素 也可以使用 Flex 布局。
.box {
display: inline-flex;
}
2
3
Webkit 内核的浏览器，必须加上-webkit前缀。
.box {
display: -webkit-flex; /* Safari */
display: flex;
}
2
3
4
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
# 二、基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（或x轴）（main axis）和垂直的交叉轴（或y轴）（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
# 三、容器(父项)的属性
以下6个属性设置在容器上（即设置在 display: flex; 的元素上）。
flex-direction：决定项目的排列方向flex-wrap：定义是否换行flex-flow：flex-direction和flex-wrap的简写justify-content：定义主轴上的对齐方式align-items：定义交叉轴上的对齐方式align-content：定义多根轴线的对齐方式
# 3.1 flex-direction 属性（定义项目排列方向）
flex-direction 属性决定主轴的方向（即项目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
2
3
它可能有4个值：
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
示例代码：
# 3.2 flex-wrap 属性（定义项目是否换行）
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap 属性定义，如果一条轴线排不下，如何换行。
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
2
3
它可能取三个值：
nowrap（默认）：不换行。会压缩项目的宽度。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
示例代码：
# 3.3 flex-flow 属性（1和2的组合简写）
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
2
3
示例代码：
# 3.4 justify-content 属性（定义项目在主轴对齐方式）
justify-content 属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
2
3
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
示例代码：
# 3.5 align-items 属性（定义项目在交叉轴）
align-items 属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
2
3
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
示例代码：
# 3.6 align-content（定义多根轴线的对齐方式）
align-content 属性定义了多根轴线的对齐方式（一排项目为一根轴线）。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
2
3
该属性可能取6个值。
flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。
示例代码：
# 四、项目(子项)的属性
以下6个属性设置在项目上。
orderflex-growflex-shrinkflex-basisflex：flex-grow,flex-shrink和flex-basis的简写align-self
# 4.1 order 属性（定义项目的排列顺序）
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}
2
3
示例代码：
# 4.2 flex-grow 属性（定义项目的放大比例）
flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
2
3
示例代码：
# 4.3 flex-shrink 属性（定义了项目的缩小比例）
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
2
3
示例代码：
# 4.4 flex-basis 属性（定义了在分配多余空间之前，项目占据的主轴空间）
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
2
3
示例代码：
# 4.5 flex 属性（快速布局）
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。它用于定义项目如何分配空间，是否可以放大、缩小以及它的基础大小。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
2
3
flex-grow：定义项目的放大比例。如果所有项目的flex-grow属性都为 1，则它们将等分剩余空间。如果一个项目的flex-grow属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项目多一倍。flex-shrink：定义项目的缩小比例。如果空间不足，所有项目将按比例缩小。默认为 1，即项目会缩小。如果一个项目的flex-shrink为 0，其他项目都为 1，则前者在空间不足时不会缩小。flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。它的默认值为auto，即项目的本来大小，可以设为跟width或height属性一样的值（比如 350px）。
flex 属性的值：
none(0 0 auto): 项目不放大也不缩小，按项目本来的大小分配空间。【这种配置意味着项目的大小是固定的，不会因为容器内的剩余空间或不足空间而变化。】auto(1 1 auto): 项目可以放大也可以缩小，按项目本来的大小分配空间。
flex: auto 的行为可以总结如下：
- 如果剩余空间不足：项目会缩小，以适应容器的大小。这是因为
flex-shrink: 1允许项目在空间不足时缩小。 - 如果存在剩余空间：项目会放大，占据容器的剩余空间。这是因为
flex-grow: 1允许项目在存在剩余空间时放大。
快捷写法：
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%。这种简写使元素能够增长并填满所有额外的空间，同时有一个起始大小为零。这种简写非常适合快速将一个容器内的子元素平分空间，实现等分布局。flex: X;→ 能够占据剩余空间的比例; 等价于flex: X 1 0%;所以：flex 数字越大，占的剩余空间就越多。
| 场景 | 用法 | 效果 |
|---|---|---|
| 平分空间 | flex: 1 给所有子项 | 所有子项宽度一样 |
| 比例占比布局（如 2:1） | flex: 2, flex: 1 | 左边宽度是右边的两倍 |
| 三栏布局（1:3:1） | flex: 1, flex: 3, flex: 1 | 中间最大，两边较小 |
| 简写 | 等价于 | 含义 |
|---|---|---|
flex: 1 | flex: 1 1 0% | 平分空间（常用） |
flex: 2 | flex: 2 1 0% | 占双倍空间 |
flex: 0 | flex: 0 1 0% | 不扩展，不占剩余空间 |
flex: none | flex: 0 0 auto | 固定大小，不伸缩 |
flex: auto | flex: 1 1 auto | 可伸缩，宽度由内容决定 |
示例代码：
# 4.6 align-self 属性（允许单个项目有与其他项目不一样的对齐方式）
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
2
3
示例代码：
# 五. Flex布局速记
# 5.1 适合项目使用的 .scss 版本（可维护性更高）
📁 src/styles/flex.scss
// ============================
// 🌟 Flex 布局工具类
// ============================
// ===== 设置为Flex 容器 =====
.flex { display: flex; } // 将元素设为块级弹性容器，启用 Flex 布局（默认主轴为水平横向）
.inline-flex { display: inline-flex; } // 设置为行内弹性容器，用于不打断文本流排布场景（如按钮组）
// ===== 设置主轴方向（flex-direction）=====
.flex-row { flex-direction: row; } // ✅ 默认值：主轴水平【横向】，子项从左到右排列（LTR 布局）
.flex-row-reverse { flex-direction: row-reverse; } // 主轴水平【横向】，子项从右到左排列（RTL 布局或右对齐菜单）
.flex-column { flex-direction: column; } // 主轴垂直【纵向】，子项从上到下排列（常用于列表、竖排布局）
.flex-column-reverse { flex-direction: column-reverse; } // 主轴垂直【纵向】，子项从下到上排列（如聊天记录倒序）
// ===== 控制是否换行（flex-wrap）=====
.flex-nowrap { flex-wrap: nowrap; } // ✅ 默认值：不换行，所有子项强制在一行内显示，可能被压缩
.flex-wrap { flex-wrap: wrap; } // 换行排列，超出一行自动换到下一行，从上往下排列
.flex-wrap-reverse { flex-wrap: wrap-reverse; } // 换行排列，从下往上排列每一行（不常用）
// ===== 控制主轴对齐方式（justify-content）=====
.justify-start { justify-content: flex-start; } // ✅ 默认值：子项靠主轴起点对齐（左/上）
.justify-end { justify-content: flex-end; } // 子项靠主轴终点对齐（右/下）
.justify-center { justify-content: center; } // 子项在主轴方向上居中排列
.justify-between { justify-content: space-between; } // 两端对齐，首尾贴边，中间子项等距分布
.justify-around { justify-content: space-around; } // 每个子项两侧间距相等，边缘间隙为内部间隙一半
.justify-evenly { justify-content: space-evenly; } // 所有子项间距完全一致，包括边缘间隙
// ===== 控制交叉轴对齐方式（align-items）=====
.items-start { align-items: flex-start; } // 子项靠交叉轴起点对齐（顶部对齐）
.items-end { align-items: flex-end; } // 子项靠交叉轴终点对齐（底部对齐）
.items-center { align-items: center; } // 子项在交叉轴方向居中（垂直居中）
.items-baseline { align-items: baseline; } // 子项文字的第一行基线对齐（常用于图文混排）
.items-stretch { align-items: stretch; } // ✅ 默认值：子项高度自动拉伸填满交叉轴（前提是子项未设置固定高度）
// ===== 控制多行对齐方式（align-content）=====
// 注意：仅在 设置了flex-wrap且有多行子项时才起作用
.content-start { align-content: flex-start; } // 多行整体靠交叉轴起点对齐（顶部）
.content-end { align-content: flex-end; } // 多行整体靠交叉轴终点对齐（底部）
.content-center { align-content: center; } // 多行整体在交叉轴方向居中
.content-between { align-content: space-between; } // 多行两端贴边，其余行平均分布间距
.content-around { align-content: space-around; } // 每行上下间距相等，边缘间距为内部间距一半
.content-stretch { align-content: stretch; } // ✅ 默认值：所有行自动拉伸以填满容器高度
// ===== 子项空间占比（flex-grow / shrink / basis）=====
.flex-1 { flex: 1 1 0%; } // 子项可放大可缩小，初始宽度为 0，占据 1 份剩余空间（常用于等分布局）
.flex-2 { flex: 2 1 0%; } // 子项可放大可缩小，初始宽度为 0，占据 2 份剩余空间（双倍占比）
.flex-3 { flex: 3 1 0%; } // 子项可放大可缩小，初始宽度为 0，占据 3 份剩余空间（三倍占比）
.flex-auto { flex: 1 1 auto; } // 子项可放大可缩小，初始宽度由内容决定（常用于内容自适应布局）
.flex-none { flex: 0 0 auto; } // 子项固定大小，不伸缩，宽高由内容或显式设置决定
// ===== 单项交叉轴对齐（align-self）=====
// 可用于覆盖容器的 align-items 设置，仅作用于单个子项
.self-auto { align-self: auto; } // ✅ 默认值：继承父元素的 align-items 设置
.self-start { align-self: flex-start; } // 该子项靠交叉轴起点对齐（顶部）
.self-end { align-self: flex-end; } // 该子项靠交叉轴终点对齐（底部）
.self-center { align-self: center; } // 该子项在交叉轴方向居中对齐
.self-stretch { align-self: stretch; } // 该子项高度自动拉伸填满容器（前提：未固定高度）
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
✅ 引入方式
在 App.vue 或入口文件中引入：
// App.vue 或 main.scss
@import "@/styles/flex.scss";
2
然后你就可以在任意页面使用如：
<div class="flex justify-between items-center flex-wrap">
...
</div>
2
3
# 5.2 Flex 布局口诀版（助记 ）
Flex 布局的所有控制样式都是写在“父元素”上，子元素会根据这些设置自动排列和对齐。
🎯 记住这段口诀，你可以快速写出任何常见布局：
开flex，定方向，换不换，主轴排；
主轴对齐 justify，交叉对齐 align；
子项分占 flex-n，单个对齐用 self。
2
3
✨ 对应写法翻译如下：
| 作用 | class 示例 | 说明 |
|---|---|---|
| 开启 Flex 容器 | .flex | 开启弹性盒子 |
| 设主轴方向（横排/竖排） | .flex-row / .flex-column | 决定元素排列方向 |
| 换行与否 | .flex-wrap / .flex-nowrap | 控制是否自动换行 |
| 主轴对齐 | .justify-center 等 | 控制水平方向对齐方式 |
| 交叉轴对齐 | .items-center 等 | 控制垂直方向对齐方式 |
| 单项对齐 | .self-center 等 | 某个子元素单独控制对齐方式 |
| 平分/占满空间 | .flex-1 | 自动占满剩余空间 |
# 5.3 子项弹性设置：flex 属性
在 Flex 布局中，flex 是作用于子元素的重要属性，用来定义子项如何占据主轴空间。
# ✅ 基本语法（简写形式）
flex: <flex-grow> <flex-shrink> <flex-basis>;
| 参数 | 含义 | 常见值 |
|---|---|---|
flex-grow | 剩余空间放大比例 | 0（默认），1、2、3… |
flex-shrink | 空间不足时缩小比例 | 1（默认），0 禁止缩小 |
flex-basis | 初始占用空间（类似宽度） | auto（默认），0%，100px |
# ✅ 常用简写写法及含义
| 写法 | 等价完整写法 | 说明 |
|---|---|---|
flex: 1 | flex: 1 1 0% | 占满剩余空间，等分，常用于子项等比布局 |
flex: 2 | flex: 2 1 0% | 占双倍空间，适合比例分配布局 |
flex: auto | flex: 1 1 auto | 自动根据内容大小伸缩 |
flex: none | flex: 0 0 auto | 固定宽度，完全不伸缩 |
flex: 0 | flex: 0 1 0% | 不扩展，占空间等于内容，但允许缩小 |
# 🧮 示例：比例分布（1:2:1）
<div class="flex">
<div style="flex: 1;">左</div>
<div style="flex: 2;">中</div>
<div style="flex: 1;">右</div>
</div>
2
3
4
5
此时总比重为 4（1+2+1），容器宽度将按比例划分：
- 左占 1/4，
- 中占 2/4，
- 右占 1/4。
# 🚫 错误写法举例（易错点）
<div class="flex">
<div style="flex: 1;">A</div>
<div>B</div> <!-- ⚠️未设置 flex，宽度由内容决定，导致不等分 -->
</div>
2
3
4
建议所有子项都加上 flex: 1，实现一致分布。
# ✅ 快速记忆口诀
flex 三参数，增长缩小宽度基；
1 1 0 最常见，等分填满父容器；
auto 自动看内容，none 则固定不变形。
2
3
小结：何时使用 flex:？
| 目的 | 推荐写法 | 备注 |
|---|---|---|
| 子项等分 | flex: 1 | 所有子项设置相同即可等宽 |
| 比例布局 | flex: 2, flex: 3 等 | 数字越大占空间越多 |
| 固定宽度 | flex: none 或不写 | 由内容或手动宽度控制 |
| 内容撑宽，适度伸缩 | flex: auto | 常用于响应式布局、带文本的按钮 |