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布局（唯一入口）
给父容器加一行代码，直接开启弹性布局，子元素自动生效：
.box {
display: flex; /* 开启Flex布局，最常用 */
/* display: inline-flex; 行内弹性容器，极少用 */
}✅ 开启后默认效果：子元素横向从左到右紧密排列、不换行、高度自适应父容器
❌ 彻底抛弃：float浮动、clear清除浮动、vertical-align对齐
二、父容器6大核心属性（控制整体布局，90%场景够用）
所有父属性口诀：方向、换行、主轴对齐、交叉轴对齐、多行对齐、简写
1. flex-direction：设置主轴方向（子元素排列方向）
作用：决定子元素横着排还是竖着排，改变主轴方向
| 属性值 | 效果 |
|---|---|
| row（默认） | 水平排列，从左→右 |
| row-reverse | 水平反向，从右→左 |
| column | 垂直排列，从上→下 |
| column-reverse | 垂直反向，从下→上 |
.box {
display: flex;
flex-direction: column; /* 子元素竖着排 */
}2. flex-wrap：设置子元素是否换行（新手高频踩坑）
默认情况下，所有子元素不会换行，会被挤压变形，这是新手最容易出错的点！
| 属性值 | 效果 |
|---|---|
| nowrap（默认） | 不换行，子元素自动压缩挤在一行 |
| wrap | 自动换行，超出父容器宽度就换行（最常用） |
| wrap-reverse | 反向换行（极少用） |
? 必记规则：做卡片列表、导航排版，必须加 flex-wrap: wrap
3. flex-flow：简写属性（direction+wrap）
一次性设置排列方向和换行规则，简化代码
.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万能居中代码（必背）
.box {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}6. align-content：多行交叉轴对齐（仅换行后生效）
注意：只有子元素换行成多行，这个属性才生效，单行无效！
作用：控制多行整体的垂直对齐、间距分布，属性值和 justify-content 一致（center、space-between 等）
三、子项目3大核心属性（控制单个子元素）
父属性管整体，子属性管个体，用来实现自适应占比、单独对齐、排序
1. flex-grow：剩余空间分配（放大比例）
默认值 0：不放大，保持自身宽度 设置数字：按比例瓜分父容器剩余空白空间
案例：三个盒子，中间盒子占双倍空间
.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：万能水平垂直居中（弹窗、图标、文字通用）
.box {
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}案例2：导航栏均匀分布
.nav {
display: flex;
justify-content: space-evenly;
}案例3：等分卡片布局
.card-list {
display: flex;
flex-wrap: wrap;
}
.card {
flex: 1;
margin: 10px;
}案例4：左右固定、中间自适应（经典布局）
.layout {
display: flex;
}
.left,.right {
flex: 0 0 100px; /* 固定宽度 */
}
.center {
flex: 1; /* 中间自适应填充 */
}案例5：纵向列表居中
.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 生成）
