CSS Flex 布局（弹性盒模型）是现代前端最常用的布局方式之一，几乎完全取代了 float 和 table 布局。下面给你一份最全、最实用的 Flex 布局总结，直接可抄、可背、可用于面试。
一、开启 Flex 布局
.container {
display: flex; /* 行主轴（默认） */
display: inline-flex; /* 内联弹性盒 */
}二、容器（父元素）上的 6 大核心属性
| 属性 | 取值 | 作用说明 |
|---|---|---|
| flex-direction | row（默认） row-reverse column column-reverse | 主轴方向（元素排列方向） |
| flex-wrap | nowrap（默认） wrap wrap-reverse | 是否换行 |
| flex-flow | ||
| justify-content | flex-start（默认） flex-end center space-between space-around space-evenly | 主轴上的对齐方式 |
| align-items | stretch（默认） flex-start flex-end center baseline | 交叉轴单行对齐方式 |
| align-content | stretch（默认） flex-start flex-end center space-between space-around space-evenly | 交叉轴多行对齐方式（只有多行时才有效） |
经典 justify-content 图解（主轴对齐）
flex-start → □□□□□
flex-end → □□□□□
center → □□□□□
space-between → □□□ □□□ □□□
space-around → □□□ □□□ □□□
space-evenly → □□□ □□□ □□□ （间距完全相等）三、项目（子元素）上的 6 大属性
| 属性 | 取值 | 说明 |
|---|---|---|
| flex-grow | 数字（默认0） | 放大比例（剩余空间如何分配） |
| flex-shrink | 数字（默认1） | 收缩比例（空间不足时如何压缩） |
| flex-basis | 长度（如 0、200px、30%） | 主轴方向上的初始大小（相当于 width/height，优先级高于 width） |
| flex | none | auto | 数字 | flex-grow / flex-shrink / flex-basis 的简写 最常用：flex: 1; |
| align-self | auto（默认） flex-start 等 | 单个项目在交叉轴上的对齐方式，可覆盖 align-items |
| order | 整数（默认0） | 排序，越小越靠前 |
flex 简写最常用写法（务必记住）
flex: 1; /* == flex: 1 1 0% 最常见！等分剩余空间 */
flex: 2; /* 占2份 */
flex: 0 0 auto; /* 不放大、不收缩，按原始大小 */
flex: none; /* == flex: 0 0 auto 不伸缩，常用于固定尺寸 */
flex: auto; /* == flex: 1 1 auto 吸收剩余空间且可收缩 */四、经典布局案例（直接抄）
- 水平垂直居中（最常见）
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}- 三栏布局 — 圣杯布局（两侧固定，中间自适应）
.container {
display: flex;
}
.left { width: 200px; flex-shrink: 0; }
.right { width: 200px; flex-shrink: 0; }
.center { flex: 1; } /* 关键：吃掉所有剩余空间 */- 等分布局（3等分、4等分…）
.item { flex: 1; } /* 所有子元素等宽 */- 右侧固定宽度，左侧自适应
.container { display: flex; }
.left { flex: 1; }
.right { width: 100px; flex-shrink: 0; }- 多行等高卡片 + 底部对齐
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start; /* 多行顶部对齐 */
}
.card {
width: 300px;
display: flex;
flex-direction: column;
}
.card-content { flex: 1; } /* 内容区撑开 */
.card-footer { margin-top: auto; } /* 底部永远在最下面 */五、面试高频题
- flex: 1 到底等于哪三个值？
→ flex: 1 1 0% - 项目宽度写死了 200px，为什么还会被压缩？
→ 因为 flex-shrink 默认是 1，会收缩。解决：flex-shrink: 0; - 为什么有时候 align-items 不生效？
→ 子元素设置了固定 height，或者有多行时要用 align-content - 移动端 1px 边框问题怎么用 flex 解决？
→ 通常配合 transform: scaleY(0.5)，flex 本身不直接解决
六、一张图记住全部属性（背下来就无敌）
容器（container）：
┌───────────────────────────────┐
│ flex-direction │ ← 主轴方向
│ flex-wrap │ ← 是否换行
│ justify-content │ ← 主轴对齐
│ align-items │ ← 交叉轴单行对齐
│ align-content │ ← 交叉轴多行对齐
└───────────────────────────────┘
项目（item）：
flex-grow → 剩余空间放大
flex-shrink → 不足空间收缩
flex-basis → 初始主轴尺寸
flex → 上面三个的简写
align-self → 单独交叉轴对齐
order → 排序记住了上面这张表 + 6个容器属性 + 6个项目属性，Flex 布局就彻底掌握了！祝你面试轻松拿 offer！
