# Flex布局超详细零基础教程（新手一站式完全掌握）

很多新手学CSS布局最头疼：浮动塌陷、垂直居中难、自适应排版乱。**Flex布局就是解决这些问题的终极方案**，也是目前前端最通用、最简单的一维布局方案，兼容所有浏览器，网页90%的横向、纵向居中、等分、自适应排版，用它都能轻松实现。

本文全程**零基础友好、无废话、每段配可运行代码、通俗类比**，看完直接彻底吃透Flex，告别布局难题。

## 一、先搞懂：Flex到底是什么？

### 1\.1 核心定义

Flex 全称 Flexible Box（弹性盒子），是 CSS 专为**一维布局**设计的布局模式（要么横向排、要么纵向排）。

相比传统浮动布局，Flex 最大优势：**无需清除浮动、天然居中、自动自适应、代码极简**。

### 1\.2 Flex 两大核心角色（重中之重）

学Flex只需要分清两个东西，所有属性都围绕这两个角色展开：

- **Flex容器（父元素）**：设置了 `display: flex` 的标签，掌控整体排列方向、对齐方式、换行规则

- **Flex项目（子元素）**：容器的**直接子标签**，自动变成弹性项，不再区分行内/块级元素

### 1\.3 关键概念：主轴 \& 交叉轴（新手必懂）

Flex 所有对齐、排列规则，都基于两根轴，**轴的方向可以切换**，不是固定的！

- **主轴**：子元素排列的方向（默认：水平从左到右）

- **交叉轴（侧轴）**：和主轴垂直的方向（默认：垂直从上到下）

默认状态：主轴=水平X轴，交叉轴=垂直Y轴
切换方向后：主轴=垂直Y轴，交叉轴=水平X轴

### 1\.4 开启Flex布局（唯一入口）

给**父容器**加一行代码，直接开启弹性布局，子元素自动生效：

```Plain Text
.box {
  display: flex; /* 开启Flex布局，最常用 */
  /* display: inline-flex; 行内弹性容器，极少用 */
}
```

✅ 开启后默认效果：子元素**横向从左到右紧密排列、不换行、高度自适应父容器**

❌ 彻底抛弃：float浮动、clear清除浮动、vertical\-align对齐

---

## 二、父容器6大核心属性（控制整体布局，90%场景够用）

所有父属性口诀：**方向、换行、主轴对齐、交叉轴对齐、多行对齐、简写**

### 1\. flex\-direction：设置主轴方向（子元素排列方向）

作用：决定子元素横着排还是竖着排，**改变主轴方向**

|属性值|效果|
|---|---|
|row（默认）|水平排列，从左→右|
|row\-reverse|水平反向，从右→左|
|column|垂直排列，从上→下|
|column\-reverse|垂直反向，从下→上|

```Plain Text
.box {
  display: flex;
  flex-direction: column; /* 子元素竖着排 */
}
```

### 2\. flex\-wrap：设置子元素是否换行（新手高频踩坑）

默认情况下，所有子元素**不会换行**，会被挤压变形，这是新手最容易出错的点！

|属性值|效果|
|---|---|
|nowrap（默认）|不换行，子元素自动压缩挤在一行|
|wrap|自动换行，超出父容器宽度就换行（最常用）|
|wrap\-reverse|反向换行（极少用）|

💡 **必记规则**：做卡片列表、导航排版，必须加 `flex-wrap: wrap`

### 3\. flex\-flow：简写属性（direction\+wrap）

一次性设置排列方向和换行规则，简化代码

```Plain Text
.box {
  flex-flow: row wrap; /* 水平排列 + 自动换行 */
}
```

### 4\. justify\-content：主轴对齐方式（最常用！水平对齐）

作用：控制子元素在**主轴上的左右对齐、间距分布**（默认主轴水平，即控制水平布局）

|属性值|效果说明|
|---|---|
|flex\-start（默认）|左对齐/上对齐，元素靠主轴起点|
|flex\-end|右对齐/下对齐，元素靠主轴终点|
|center|**居中对齐（最常用）**|
|space\-between|两端对齐，中间均分间距，**首尾无外边距**|
|space\-around|每个元素两侧均分间距，首尾有外边距（间距是中间的一半）|
|space\-evenly|所有间距完全均等（首尾、中间间距一致，新版常用）|

### 5\. align\-items：单行交叉轴对齐（垂直对齐神器）

作用：子元素**单行排列时**，在交叉轴（默认垂直方向）的对齐方式，轻松实现垂直居中

|属性值|效果说明|
|---|---|
|stretch（默认）|拉伸铺满父容器高度（子元素不设高度时生效）|
|flex\-start|顶部对齐|
|flex\-end|底部对齐|
|center|**垂直居中（万能居中核心）**|

🔥 **Flex万能居中代码（必背）**

```Plain Text
.box {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
```

### 6\. align\-content：多行交叉轴对齐（仅换行后生效）

注意：**只有子元素换行成多行，这个属性才生效**，单行无效！

作用：控制多行整体的垂直对齐、间距分布，属性值和 justify\-content 一致（center、space\-between 等）

---

## 三、子项目3大核心属性（控制单个子元素）

父属性管整体，子属性管个体，用来实现**自适应占比、单独对齐、排序**

### 1\. flex\-grow：剩余空间分配（放大比例）

默认值 0：不放大，保持自身宽度
设置数字：按比例瓜分父容器剩余空白空间

案例：三个盒子，中间盒子占双倍空间

```Plain Text
.item1,.item3 { flex-grow: 1; }
.item2 { flex-grow: 2; }
```

### 2\. flex\-shrink：空间不足压缩比例（缩小比例）

默认值 1：空间不足时自动压缩
设置 0：**禁止压缩，固定尺寸不变形**（常用）

### 3\. flex\-basis：基准宽度

设置子元素初始宽度，优先级高于 width，默认 auto

### 4\. flex 简写（终极万能简写，必学）

语法：`flex: grow shrink basis`

常用固定写法（直接背）：

- `flex: 1`：均分剩余空间，自适应等分布局（最常用）

- `flex: 0 0 200px`：固定宽度200px，不放大、不缩小（固定卡片尺寸）

### 5\. align\-self：单个子元素单独对齐

打破父容器统一对齐规则，单独设置某个子元素的垂直对齐，属性值和 align\-items 一致

### 6\. order：子元素排序

默认值 0，数值越小越靠前，可正负，无需改HTML结构就能调整顺序

---

## 四、新手必避的6个Flex坑（90%人踩过）

- **坑1**：子元素挤压变形 → 解决：加 `flex-wrap: wrap` 自动换行

- **坑2**：想固定尺寸却被压缩 → 解决：加 `flex-shrink: 0`

- **坑3**：多行居中无效 → 解决：单行用 align\-items，多行用 align\-content

- **坑4**：分不清主轴交叉轴 → 记住：排列方向就是主轴，垂直就是交叉轴

- **坑5**：flex:1 盒子内容溢出 → 解决：配合`min-width: 0`

- **坑6**：忘记Flex只作用**直接子元素** → 孙子元素不生效，需单独开启

---

## 五、5个高频实战案例（看完直接会用）

### 案例1：万能水平垂直居中（弹窗、图标、文字通用）

```Plain Text
.box {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
```

### 案例2：导航栏均匀分布

```Plain Text
.nav {
  display: flex;
  justify-content: space-evenly;
}
```

### 案例3：等分卡片布局

```Plain Text
.card-list {
  display: flex;
  flex-wrap: wrap;
}
.card {
  flex: 1;
  margin: 10px;
}
```

### 案例4：左右固定、中间自适应（经典布局）

```Plain Text
.layout {
  display: flex;
}
.left,.right {
  flex: 0 0 100px; /* 固定宽度 */
}
.center {
  flex: 1; /* 中间自适应填充 */
}
```

### 案例5：纵向列表居中

```Plain Text
.list {
  display: flex;
  flex-direction: column;
  align-items: center;
}
```

---

## 六、Flex终极速记口诀（新手速成）

**父管整体，子管个体**

父六属性：方向换行、主轴对齐、交叉对齐、多行对齐
子六属性：缩放基准、单独对齐、排序占比
居中万能：双center（justify\+align）
自适应万能：flex:1
不挤压万能：flex\-wrap:wrap

## 七、新手学习总结

1\. Flex 是**一维布局**，优先用于单行/单列、居中、自适应、导航、卡片排版

2\. 所有布局问题，优先用 Flex 解决，放弃浮动布局

3\. 记住核心：父容器开flex、调方向对齐；子元素调占比、固定尺寸

4\. 99%的企业官网、移动端页面布局，Flex都能搞定

> （注：部分内容可能由 AI 生成）