Flex 弹性布局

[TOC]

# 1. Flex布局介绍

Flex 是 Flexible Box 的缩写，意为"弹性布局"，为盒模型提供了最大的灵活性，它可以简便，完整，响应式的实现页面布局，市面上的主流浏览器已经支持了这种布局

## 1.1. Flex主容器

任何容器都可以设置为flex容器，为容器元素添加`display:flex`样式即为设置，采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"

```CSS
.box{
  display: -webkit-flex; /* Safari Webkit 内核的浏览器，必须加上-webkit前缀。*/
  display: flex;
}
```

**容器默认存在两根轴：**水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

![](/UploadFlie/MarkdownImg/20250228/202502280555088877.png)

> **说明：**行内元素也可以使用 Flex 布局，元素添加`display: inline-flex`样式即为设置
***
> **注意：** 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

### 1.1.1. 容器的属性

#### 1.1.1.1. flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）

+ 1.主轴 main axis：如果flex容器设置样式属性`flex-direction:row`则X轴方向为主轴，如果设置的是`flex-direction:column`那么Y轴便是主轴
+ 2.交叉轴 cross axis：如果X轴方向为主轴那么Y轴方向便是交叉轴，同理Y轴为主轴，X轴则为交叉轴

|属性值|说明|
|--|--|
|row:|是默认值，项目从左往右排列|
|row-reverse:|项目从右往左排列|
|column:|项目从上往下排列|
|column-reverse:|项目从下往上排列|
||![](/UploadFlie/MarkdownImg/20250228/202502280551554143.png)|

#### 1.1.1.2. flex-wrap

决定主轴换行，决定项目在一行放不下的情况下如何换行，默认情况下，项目都排在一条线（又称"轴线"）上

|属性值|说明|
|--|--|
|nowrap:| 是默认值，不换行，这种情况项目会缩小宽度挤在一行，设置的width无效了|
|wrap:| 换行，第一行在上面，第二行从左往右排列，但如果flex-direction设置的是row-reverse那么它就是从右往左排列了，感觉有点像float:right|
|wrap-reverse:| 换行，第二行在上面，从左往右排列，第一行在下面，同样也受flex-direction属性影响|
||![](/UploadFlie/MarkdownImg/20250303/202503030300378287.png)![](/UploadFlie/MarkdownImg/20250303/202503030330370013.png)![](/UploadFlie/MarkdownImg/20250303/202503030350378488.png)![](/UploadFlie/MarkdownImg/20250303/202503030311388204.png)|

#### 1.1.1.3. flex-flow

flex-direction属性和flex-wrap属性的简写，注意direction在前，wrap在后

|属性值|说明|
|--|--|
|flex-flow:| row nowrap 等效于flex-direction:row 加 flex-wrap:nowrap，flex-flow 默认值就是row nowrap|

#### 1.1.1.4. justify-content

justify-content 是 CSS 中用于 Flexbox 布局和 Grid 布局的属性，它主要用于定义项目在主轴上的对齐方式和分布情况，具体对齐方式与轴的方向有关。下面详细介绍 justify-content 的各个属性值及其差异

|属性值|说明|
|--|--|
|flex-start:|**说明**：项目会从主轴的起始位置开始排列，它们之间没有额外的间距，并且会尽可能靠近主轴的起始端（默认值：左对齐）<hr>**效果**：项目会从容器的左侧（水平主轴）或顶部（垂直主轴）开始排列|
|flex-end:|**说明**：项目会从主轴的结束位置开始排列，它们之间没有额外的间距，并且会尽可能靠近主轴的结束端<hr>**效果**：项目会从容器的右侧（水平主轴）或底部（垂直主轴）开始排列|
||flex-start和flex-end效果： ![](/UploadFlie/MarkdownImg/20250304/202503041019345305.png)|
|center:|**说明**：项目会在主轴上居中排列，它们之间没有额外的间距，并且会在主轴方向上处于容器的中心位置<hr>**效果**：项目会在容器的水平（水平主轴）或垂直（垂直主轴）中心位置排列|
||![](/UploadFlie/MarkdownImg/20250304/202503041010327578.png)|
|space-between:|**说明**：项目会在主轴上均匀分布，第一个项目会紧贴主轴的起始端，最后一个项目会紧贴主轴的结束端，剩余的空间会平均分配到项目之间<hr>**效果**：项目之间会有相等的间距，并且两端的项目会与容器边缘对齐<hr>![](/UploadFlie/MarkdownImg/20250304/202503041109117260.png)|
|space-around:|**说明**：项目会在主轴上均匀分布，每个项目的两侧都会有相等的间距，这意味着项目之间的间距是项目与容器边缘间距的两倍，可以用margin设置了左右外边距的方式理解<hr>**效果**：项目周围会有环绕的间距，项目之间和项目与容器边缘都有一定的空间<hr>![](/UploadFlie/MarkdownImg/20250304/202503041126199649.png)|
|space-evenly:|**说明**：项目会在主轴上均匀分布，所有的间距（项目之间以及项目与容器边缘之间）都是相等的<hr>**效果**：项目之间和项目与容器边缘的间距完全相同<hr>![](/UploadFlie/MarkdownImg/20250304/202503041146300930.png)|

#### 1.1.1.5. align-items

align-items 是 CSS 中用于 Flexbox 布局和 Grid 布局的属性，它主要用于定义项目在交叉轴上的对齐方式。下面详细介绍 align-items 的各个属性值及其差异

|属性值|说明|
|--|--|
|stretch:|**align-items的默认值**<hr>**说明**：项目会在交叉轴方向上拉伸以填充整个容器的交叉轴空间。前提是项目在交叉轴方向上没有设置固定的尺寸（如没有设置 height 当主轴为水平方向时，或没有设置 width 当主轴为垂直方向时）<hr>**效果**：每个项目的高度会自动拉伸到与容器的高度一致（假设主轴是水平方向）<hr>![](/UploadFlie/MarkdownImg/20250304/202503040201265585.png)<hr>**注意**：如果项目设置了宽度或高度那么stretch属性值将无效果，下图就是给项目设置了宽高的结果展示<hr>![](/UploadFlie/MarkdownImg/20250304/202503040251302301.png)|
|flex-start:|**说明**：项目会在交叉轴的起始位置对齐，它们会尽可能靠近交叉轴的起始端<hr>**效果**：如果主轴是水平方向，项目会在容器的顶部对齐；如果主轴是垂直方向，项目会在容器的左侧对齐。![](/UploadFlie/MarkdownImg/20250304/202503040212440812.png)|
|flex-end:|**说明**：说明：项目会在交叉轴的结束位置对齐，它们会尽可能靠近交叉轴的结束端<hr>**效果**：如果主轴是水平方向，项目会在容器的底部对齐；如果主轴是垂直方向，项目会在容器的右侧对齐<hr>![](/UploadFlie/MarkdownImg/20250304/202503040229452465.png)|
|center:|**说明**：项目会在交叉轴上居中对齐，它们会在交叉轴方向上处于容器的中心位置<hr>**效果**：项目会在容器的垂直（水平主轴）或水平（垂直主轴）中心位置对齐<hr>![](/UploadFlie/MarkdownImg/20250304/202503040232496805.png)|
|baseline:|**说明**：项目会根据它们的基线对齐。基线通常是文本的底部，但对于没有文本的元素，基线是元素的底部边缘<hr>**效果**：所有项目的文本基线会对齐，可能会导致项目在交叉轴上的位置不同<hr>下面给项目设置不同的margin-top，然后观察有无baseline的区别<hr>![](/UploadFlie/MarkdownImg/20250306/202503061127371871.png)<hr>再给项目设置不同的margin-left，然后观察有无baseline的区别<hr>![](/UploadFlie/MarkdownImg/20250306/202503061106386056.png)|

#### 1.1.1.6. align-content

align-content 是 CSS 中用于 Flexbox 布局和 Grid 布局的属性，不过它主要在多行（列）的 Flexbox 容器或 Grid 容器中发挥作用，用于定义多行（列）项目在交叉轴上的对齐方式和分布情况。下面详细介绍 align-content 的各个属性值及其差异

|属性值|说明|
|--|--|
|stretch:|**说明**：多行（列）项目会在交叉轴方向上拉伸以填充整个容器的交叉轴空间。如果项目没有设置固定的交叉轴尺寸，它们会平均分配容器的剩余空间（align-content属性的默认值）<hr>**效果**：每一行的高度会根据容器剩余空间平均分配，使得所有行填满容器的交叉轴高度（假设主轴为水平方向）<hr>![](/UploadFlie/MarkdownImg/20250306/202503061007192080.png) 前面两个效果图设置了宽度，没有设置高度，因此在Y轴拉伸铺满了，后面两个则是设置了高度没有设置宽度，因此在X轴铺满了，这里的效果和align-item的stretch的一致，只是多了换行多主轴的情况|
|flex-start:|**说明**：多行（列）项目会从交叉轴的起始位置开始排列，它们之间没有额外的间距，并且会尽可能靠近交叉轴的起始端<hr>**效果**：如果主轴是水平方向，所有行将从容器的顶部开始堆叠；如果主轴是垂直方向，所有列将从容器的左侧开始排列<hr>![](/UploadFlie/MarkdownImg/20250306/202503061045396430.png) align-content的flex-start属性和只是换行的区别就是，只换行的话项目换行后是均分容器的空间，align-content的flex-start属性则是换行后只会根据项目的尺寸排列|
|flex-end:|**说明**：多行（列）项目会从交叉轴的结束位置开始排列，它们之间没有额外的间距，并且会尽可能靠近交叉轴的结束端<hr>**效果**：如果主轴是水平方向，所有行将从容器的底部开始堆叠；如果主轴是垂直方向，所有列将从容器的右侧开始排列<hr>![](/UploadFlie/MarkdownImg/20250306/202503061047484530.png)|
|center:|**说明**：多行（列）项目会在交叉轴上居中排列，它们之间没有额外的间距，并且会在交叉轴方向上处于容器的中心位置<hr>**效果**：多行项目会在容器的垂直（水平主轴）或水平（垂直主轴）中心位置排列<hr>![](/UploadFlie/MarkdownImg/20250306/202503061007570331.png)|
|space-between:|**说明**：多行（列）项目会在交叉轴上均匀分布，第一行（列）会紧贴交叉轴的起始端，最后一行（列）会紧贴交叉轴的结束端，剩余的空间会平均分配到行（列）之间<hr>**效果**：行（列）之间会有相等的间距，并且两端的行（列）会与容器边缘对齐<hr>![](/UploadFlie/MarkdownImg/20250306/202503061151285322.png)|
|space-around:|**说明**：多行（列）项目会在交叉轴上均匀分布，每行（列）的两侧都会有相等的间距，这意味着行（列）之间的间距是行（列）与容器边缘间距的两倍<hr>**效果**：行（列）周围会有环绕的间距，行（列）之间和行（列）与容器边缘都有一定的空间<hr>![](/UploadFlie/MarkdownImg/20250306/202503061139334095.png)|

> **Tips**：通常align-content属性都要搭配flex-wrap属性来使用，没有多行主轴align-content属性也就没有效果了。align-content 属性值的主要差异在于多行（列）项目在交叉轴上的对齐方式和间距分布情况。通过选择不同的属性值，可以实现各种不同的交叉轴布局效果，以满足不同的设计需求。需要注意的是，align-content 在只有一行（列）项目的 Flexbox 容器中不起作用

## 1.2. Flex成员

Flex容器下的元素都是Flex成员，被称为“项目”Flex item

### 1.2.1. 项目的属性

#### 1.2.1.1. order

在 Flex 布局里，order 是一个作用于 Flex 项目（即 Flex 容器内的子元素）的属性，它的主要用途是控制项目在 Flex 容器中的排列顺序。以下为你详细介绍 order 属性

```css
.item {
 order: <integer>; /*这里的 <integer> 是一个整数值，可以是正数、负数或者零，默认值为 0*/
}
```

**工作原理：**

+ Flex 容器会按照项目的 order 值从小到大对项目进行排序。具有相同 order 值的项目会按照它们在 HTML 代码中出现的先后顺序排列。
+ 负数会让项目排在前面，正数会让项目排在后面。

![](/UploadFlie/MarkdownImg/20250306/202503060156437631.png)

> **注意事项：**
+ order 属性只会影响项目的视觉排列顺序，不会改变文档的逻辑结构。例如，在使用屏幕阅读器等辅助设备时，元素仍然会按照 HTML 代码中的顺序被读取
+ 该属性仅适用于 Flex 项目，如果元素不是 Flex 容器的直接子元素，设置 order 属性不会产生任何效果

#### 1.2.1.2. flex-grow

在 Flex 布局里，flex-grow 是一个作用于 Flex 项目（Flex 容器内的子元素）的属性，它主要用于定义项目在 Flex 容器中分配剩余空间的能力。以下是关于 flex-grow 属性的详细介绍

```css
.item {
 flex-grow: <number>; /*这里的 <number> 是一个非负的数值，默认值为 0*/
}
```

**工作原理：**

+ 剩余空间：当 Flex 容器的主轴方向上存在剩余空间时，flex-grow 属性就会发挥作用。剩余空间是指 Flex 容器的总宽度（或高度，取决于 flex-direction 的值）减去所有 Flex 项目初始大小之和后剩余的部分。
+ 分配规则：Flex 项目会根据各自的 flex-grow 值按比例分配这些剩余空间。具体来说，每个项目分配到的额外空间等于剩余空间乘以该项目的 flex-grow 值与所有项目 flex-grow 值总和的比值

![](/UploadFlie/MarkdownImg/20250306/202503060204048111.png)

**特殊情况：**

+ flex-grow 值为 0：当项目的 flex-grow 值为 0 时，该项目不会参与剩余空间的分配，它会保持其初始大小
+ 所有项目的 flex-grow 值相同：如果所有项目的 flex-grow 值都相同，那么剩余空间会被平均分配给每个项目

> **注意事项：**
+ flex-grow 属性仅在 Flex 容器的主轴方向上有剩余空间时才会生效。如果所有项目的初始大小之和已经等于或超过了 Flex 容器的大小，那么 flex-grow 属性将不会产生任何效果
+ flex-grow 属性只影响项目在主轴方向上的大小，对于交叉轴方向的大小没有影响。例如，当 flex-direction 为 row 时，flex-grow 影响项目的宽度；当 flex-direction 为 column 时，flex-grow 影响项目的高度

#### 1.2.1.3. flex-shrink

在 Flex 布局里，flex-shrink 是一个用于控制 Flex 项目在空间不足时如何收缩的属性。以下是关于它的详细介绍

```css
.item {
 flex-shrink: <number>; /*这里的 <number> 是一个非负的数值，默认值为 1。*/
}
```

**工作原理：**

+ 当 Flex 容器的主轴方向上，所有 Flex 项目的初始大小之和超过了容器的大小时，flex-shrink 属性就会发挥作用。它决定了每个项目将按何种比例来缩小，以适应容器的空间
+ 具体来说，每个项目收缩的空间大小与它自身的 flex-shrink 值和初始大小有关。收缩空间的计算方式是：每个项目收缩的空间 = 超出容器的空间 ×（该项目的 flex-shrink 值 × 该项目的初始大小）÷ 所有项目（flex-shrink 值 × 初始大小）的总和

![](/UploadFlie/MarkdownImg/20250306/202503060230283618.png)

**特殊情况：**

+ flex-shrink 值为 0：当项目的 flex-shrink 值为 0 时，该项目在空间不足时不会收缩，会保持其初始大小。即使其他项目收缩，该项目也会尝试占据其原本的空间，可能会导致溢出容器
+ 所有项目的 flex-shrink 值相同：如果所有项目的 flex-shrink 值都相同，那么每个项目会根据自身的初始大小按比例收缩

**注意事项：**

+ flex-shrink 属性仅在 Flex 容器的主轴方向上空间不足时才会生效。如果所有项目的初始大小之和小于或等于 Flex 容器的大小，那么 flex-shrink 属性将不会产生任何效果
+ flex-shrink 属性只影响项目在主轴方向上的大小，对于交叉轴方向的大小没有影响。例如，当 flex-direction 为 row 时，flex-shrink 影响项目的宽度；当 flex-direction 为 column 时，flex-shrink 影响项目的高度

#### 1.2.1.4. flex-basis

在 Flex 布局中，flex-basis 是一个用于定义 Flex 项目在主轴方向上初始大小的属性。它为项目在分配剩余空间或进行收缩操作之前提供了一个基础尺寸。以下是关于 flex-basis 属性的详细介绍

```css
.item {
 flex-basis: <length> | <percentage> | auto | content;
}
```

|属性值|说明|
|--|--|
|length:|可以使用固定的长度单位，如 px、em、rem 等，`flex-basis: 200px;`这表示该 Flex 项目在主轴方向上的初始大小为 200 像素|
|percentage:|使用百分比值，该百分比是相对于 Flex 容器在主轴方向上的大小，`flex-basis: 50%;`如果 Flex 容器的宽度是 400px，那么这个项目的初始宽度将是 400px * 50% = 200px|
|auto|这是 flex-basis 的默认值。当设置为 auto 时，Flex 项目会根据自身的内容大小或者 width（当 flex-direction 为 row） 或 height（当 flex-direction 为 column） 属性来确定初始大小。<hr>如果项目同时设置了 width（或 height） 和 flex-basis: auto，则 width（或 height） 属性的值会作为项目的初始大小。例如`width:150px;flex-basis: auto;`这里项目的初始宽度就是 150px|
|content|该值表示项目的初始大小由其内容的固有大小决定，即根据内容自动调整大小<hr>这种方式可以让项目根据自身内容动态地确定初始尺寸，而不需要手动指定固定的长度或百分比。不过，content 这个值的兼容性相对较差，部分旧浏览器可能不支持|
||![](/UploadFlie/MarkdownImg/20250306/202503060241486910.png)|

**与 width 和 height 的关系：**

在 flex-direction: row 的情况下，flex-basis 会覆盖 width 属性。也就是说，如果同时设置了 flex-basis 和 width，flex-basis 的值将优先用于确定项目的初始宽度。例如：

```css
.item {
  width: 100px;
  flex-basis: 200px;
}
```

项目的初始宽度将是 200px。
>**Tips：**在 flex-direction: column 的情况下，flex-basis 会覆盖 height 属性，原理与上述类似。

**结合 flex-grow 和 flex-shrink：**

flex-basis 为项目提供了初始大小，而 flex-grow 和 flex-shrink 则用于在有剩余空间或空间不足时对项目进行扩展或收缩。

例如，当 flex-basis 确定了项目的初始大小后，如果 Flex 容器还有剩余空间，并且项目的 flex-grow 值不为 0，那么项目会根据 flex-grow 的规则分配剩余空间；如果空间不足，且项目的 flex-shrink 值不为 0，项目会根据 flex-shrink 的规则进行收缩

#### 1.2.1.5. flex

在 Flex 布局里，flex 属性是一个复合属性，它是 flex-grow、flex-shrink 和 flex-basis 这三个属性的缩写，用于定义 Flex 项目在主轴上的伸缩性、收缩性和初始大小。合理使用 flex 属性可以高效地控制 Flex 项目的布局。以下是关于它的详细介绍

```css
.item {
 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}
```

**属性值及含义：**

|属性值|说明|
|--|--|
|none|当 flex 属性值为 none 时，等同于 flex: 0 0 auto。这意味着项目既不会在有剩余空间时扩展，也不会在空间不足时收缩，其大小由自身内容或 width/height 属性决定|
|[ <'flex-grow'> <'flex-shrink'>? &#124;&#124; <'flex-basis'> ]|这是一种更灵活的写法，可以指定一个、两个或三个值，不同组合有不同的含义，详细请见下表|

|值|说明|
|--|--|
|单值语法|值为无单位的数字：会被当作 flex-grow 的值，flex-shrink 默认为 1，flex-basis 默认为 0。例如：`flex: 2;` 等同于 `flex: 2 1 0` 此时项目会以 2 的比例去分配剩余空间，并且在空间不足时会收缩<hr>值为长度或百分比：会被当作 flex-basis 的值，flex-grow 默认为 1，flex-shrink 默认为 1。例如：`flex: 200px;` 等同于 `flex: 1 1 200px`这表示项目的初始大小为 200px，并且在有剩余空间时会扩展，空间不足时会收缩<hr>值为 `flex: auto` 等同于 `flex: 1 1 auto`。项目会根据自身内容确定初始大小，同时在有剩余空间时会扩展，空间不足时会收缩|
|双值语法|第一个值为无单位数字，第二个值为无单位数字：第一个值作为 flex-grow，第二个值作为 flex-shrink，flex-basis 默认为 0。例如：`flex: 3 2;` 等同于 `flex: 3 2 0`这意味着项目以 3 的比例分配剩余空间，并且在空间不足时以 2 的比例收缩<hr>第一个值为无单位数字，第二个值为长度或百分比：第一个值作为 flex-grow，第二个值作为 flex-basis，flex-shrink 默认为 1。例如：`flex: 2 300px;` 等同于 `flex: 2 1 300px`项目初始大小为 300px，会以 2 的比例分配剩余空间，在空间不足时会收缩|
|三值语法|分别对应 flex-grow、flex-shrink 和 flex-basis 的值。例如：`flex: 1 2 150px;`表示项目以 1 的比例分配剩余空间，以 2 的比例在空间不足时收缩，初始大小为 150px|

**常用缩写及应用场景：**

+ **flex: 0 1 auto（默认值）**：项目不会主动扩展去填充剩余空间，但在空间不足时会收缩。适合那些不希望被拉伸，但可以在必要时缩小的元素。
+ **flex: 1 1 auto（flex: auto）**：项目会根据自身内容确定初始大小，并且在有剩余空间时会扩展，空间不足时会收缩。常用于需要自适应布局的场景。
+ **flex: 1 1 0（flex: 1）**：项目初始大小为 0，会以相等的比例分配剩余空间，并且在空间不足时会收缩。常用于实现等分布局，比如常见的导航栏平均分配宽度。

#### 1.2.1.6. align-self

在 Flex 布局中，align-self 属性用于为单个 Flex 项目设置在交叉轴上的对齐方式，它可以覆盖由 align-items 属性为整个 Flex 容器所设置的对齐方式。以下是关于 align-self 属性的详细介绍

|属性值|说明|
|--|--|
|auto:|这是 align-self 的默认值。当设置为 auto 时，项目会继承其父元素（Flex 容器）的 align-items 属性值。如果父元素没有设置 align-items，则使用其默认值 stretch|
|flex-start:|使项目在交叉轴的起始位置对齐。如果交叉轴是垂直方向（flex-direction 为 row 时），项目会靠上对齐；如果交叉轴是水平方向（flex-direction 为 column 时），项目会靠左对齐|
|flex-end:|让项目在交叉轴的结束位置对齐。在垂直交叉轴情况下，项目会靠下对齐；在水平交叉轴情况下，项目会靠右对齐|
|center:|使项目在交叉轴上居中对齐。无论是垂直交叉轴还是水平交叉轴，项目都会处于中间位置|
|baseline:|项目会根据其内容的基线进行对齐。所有设置了 align-self: baseline 的项目，它们的基线会对齐。如果某个项目没有文本内容，一般会以其顶部边缘作为基线|
|stretch:|项目会在交叉轴方向上拉伸以填充容器的可用空间，但前提是项目在交叉轴方向上没有设置固定的尺寸（如没有设置 width 或 height）|
||![](/UploadFlie/MarkdownImg/20250306/202503060342467874.png) 图片效果flex容器设置了`align-items:center`，第三个项目则设置了`align-self:flex-star`，因此第三个项目就覆盖了flex容器的align-items属性了|

# 引用

> [Flex 布局教程：语法篇](https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
> [Flex 布局示例](https://static.vgee.cn/static/index.html)