Flex 布局（弹性布局）是 CSS 中最常用、最灵活的布局方式，核心作用是快速实现元素的对齐、分布、自适应，替代传统的 float、position 布局，适配所有现代浏览器，上手简单且实用性极强。
核心原则：给父容器设置 display: flex，父容器称为「flex 容器」，其直接子元素称为「flex 项目」，通过控制容器和项目的属性，实现各种布局效果。
一、核心基础（必学，3分钟掌握）
1. 开启 Flex 布局（第一步）
给需要布局的父容器添加 display: flex，即可开启弹性布局，项目会默认横向排列（水平主轴）。
/* 父容器 */
.flex-container {
display: flex; /* 开启flex布局 */
width: 100%;
height: 300px;
background: #f5f5f5;
}
/* 子项目 */
.flex-item {
width: 100px;
height: 100px;
background: #00aaff;
margin: 10px;
}
效果：3个项目横向排列，默认在容器顶部对齐，自动填满水平方向（未填充满时，项目之间有间隙）。
2. 两个核心概念（必记）
- 主轴：项目排列的主要方向（默认「水平方向」，从左到右）
- 交叉轴：与主轴垂直的方向（默认「垂直方向」，从上到下）
后续所有属性，都是围绕「主轴」和「交叉轴」的对齐、分布来设置。
二、容器属性（控制整体布局，最常用6个）
所有属性均设置在「父容器」上，控制子项目的排列方式，重点记前4个。
1. flex-direction（控制主轴方向，核心）
决定项目是横向、纵向排列，解决“水平/垂直布局”问题。
| 属性值 | 效果 | 常用场景 |
|---|---|---|
| row（默认） | 主轴水平，项目从左到右 | 导航栏、横向卡片 |
| column | 主轴垂直，项目从上到下 | 侧边栏、纵向列表 |
| row-reverse | 主轴水平，项目从右到左 | 反向排列（少见） |
| column-reverse | 主轴垂直，项目从下到上 | 反向排列（少见） |
2. justify-content（主轴对齐，最常用）
控制项目在「主轴」上的对齐方式，解决“水平/垂直居中、分布”问题。
| 属性值 | 效果（主轴水平时） | 高频场景 |
|---|---|---|
| flex-start（默认） | 项目靠左对齐 | 普通列表 |
| center | 项目水平居中 | 登录框、卡片居中 |
| flex-end | 项目靠右对齐 | 右侧按钮组 |
| space-between | 两端对齐，项目之间间距相等 | 导航栏（左右分布） |
| space-around | 项目两侧间距相等，整体间距均匀 | 卡片布局、商品列表 |
3. align-items（交叉轴对齐，核心）
控制项目在「交叉轴」上的对齐方式，解决“垂直/水平居中”的另一半问题。
| 属性值 | 效果（主轴水平时） | 高频场景 |
|---|---|---|
| stretch（默认） | 项目高度拉伸至与容器一致 | 等高卡片、导航栏 |
| center | 项目垂直居中 | 文字+图标对齐、卡片内容居中 |
| flex-start | 项目靠上对齐 | 顶部列表 |
| flex-end | 项目靠下对齐 | 底部按钮组 |
4. flex-wrap（控制换行，避免溢出）
默认情况下，项目会强制在一行显示，超出容器会溢出，用这个属性控制换行。
| 属性值 | 效果 |
|---|---|
| nowrap（默认） | 不换行，项目会被压缩 |
| wrap | 自动换行，超出一行时，新行在下 |
| wrap-reverse | 自动换行，超出一行时，新行在上 |
5. align-content（多行交叉轴对齐，少见）
只有当项目换行（flex-wrap: wrap）时才生效，控制多行项目在交叉轴上的整体对齐方式，用法和 justify-content 类似（center、space-between 等）。
6. flex-flow（简写属性，偷懒必备）
flex-direction + flex-wrap 的简写，顺序任意，默认值：flex-flow: row nowrap。
/* 等价于 flex-direction: column; flex-wrap: wrap; */
.flex-container {
flex-flow: column wrap;
}
三、项目属性（控制单个项目，常用3个）
属性设置在「子项目」上，控制单个项目的大小、对齐方式，按需使用。
1. flex（核心，控制项目占比）
最常用属性，控制项目在主轴上的占比，替代 width/height，实现自适应，语法：flex: 数字（数字越大，占比越大）。
.flex-container {
display: flex;
width: 100%;
height: 200px;
background: #f5f5f5;
}
/* 三个项目，占比 1:2:1 */
.item1 { flex: 1; background: #00aaff; }
.item2 { flex: 2; background: #ff7d00; }
.item3 { flex: 1; background: #00cc66; }
效果：容器宽度被分成 4 份，item2 占 2 份，其余各占 1 份，自适应容器宽度。
补充：flex 的完整写法是 flex: flex-grow flex-shrink flex-basis，日常用简写（数字）即可。
2. align-self（单个项目交叉轴对齐）
覆盖父容器的 align-items 属性，单独控制某个项目的交叉轴对齐方式。
.flex-container {
display: flex;
align-items: center; /* 所有项目垂直居中 */
}
.item-special {
align-self: flex-end; /* 单个项目靠下对齐 */
}
补充：flex 的完整写法是 flex: flex-grow flex-shrink flex-basis，日常用简写（数字）即可。
3. order（控制项目顺序）
默认所有项目 order: 0，数字越小，项目越靠前；可以用负数，实现“不改变HTML结构，调整显示顺序”。
.item1 { order: 2; } /* 第3个显示 */
.item2 { order: 1; } /* 第2个显示 */
.item3 { order: 0; } /* 第1个显示 */
四、实战案例（直接复制套用，覆盖80%场景）
案例1：水平居中 + 垂直居中（最常用）
适用于登录框、弹窗内容、卡片居中，一步到位。
.container {
display: flex;
justify-content: center; /* 主轴居中（水平） */
align-items: center; /* 交叉轴居中（垂直） */
width: 100vw; /* 视口宽度 */
height: 100vh; /* 视口高度 */
background: #f5f5f5;
}
.center-box {
width: 300px;
height: 200px;
background: white;
border-radius: 8px;
text-align: center;
line-height: 200px;
}
案例2：导航栏（两端对齐）
适用于网站导航，左侧logo、右侧菜单，两端分布。
.nav {
display: flex;
justify-content: space-between; /* 两端对齐 */
align-items: center; /* 垂直居中 */
padding: 0 20px;
height: 60px;
background: #333;
color: white;
}
.nav-logo {
font-size: 20px;
font-weight: bold;
}
.nav-menu {
display: flex; /* 菜单横向排列 */
gap: 20px; /* 菜单之间间距 */
}
案例3：自适应卡片布局（换行）
适用于商品列表、卡片展示，自适应屏幕宽度，自动换行。
.card-container {
display: flex;
flex-wrap: wrap; /* 自动换行 */
gap: 20px; /* 卡片之间间距 */
padding: 20px;
background: #f5f5f5;
}
.card {
flex: 1; /* 自适应占比 */
min-width: 250px; /* 最小宽度，避免太窄 */
height: 200px;
background: white;
border-radius: 8px;
padding: 15px;
}
案例4：垂直布局（侧边栏）
适用于侧边导航、垂直列表，纵向排列。
.sidebar {
display: flex;
flex-direction: column; /* 垂直排列 */
width: 200px;
height: 500px;
background: #333;
color: white;
}
.sidebar-item {
padding: 15px 20px;
border-bottom: 1px solid #444;
}
.sidebar-item:last-child {
border-bottom: none;
}
五、注意事项（避坑关键）
- 开启 flex 布局后，子项目的 float、clear、vertical-align 属性会失效，无需再用。
- flex: 1 等价于 flex: 1 1 0%，会让项目自适应填充剩余空间，优先于固定 width/height。
- justify-content 控制主轴，align-items 控制交叉轴，方向由 flex-direction 决定（别搞反）。
- 项目换行时，用 gap 控制间距（比 margin 更简洁，不会出现最后一个项目多余间距）。
- 兼容问题：Flex 布局支持 IE10+，现代浏览器（Chrome、Edge、Firefox、Safari）均完美支持，无需加前缀。
六、总结（快速记忆）
-
开启：父容器
display: flex； -
方向：flex-direction（row/column）；
-
对齐：主轴 justify-content，交叉轴 align-items；
-
换行：flex-wrap: wrap；
-
占比：项目 flex: 数字；
记住这5点，就能解决80%的布局问题，剩下的靠实战熟练即可。
