Flex 布局详解与常用方法
一、Flex 是什么
Flex（Flexible Box，弹性盒子）是 CSS3 提供的一种一维布局模型，专门用于在容器中对项目进行排列、对齐和分配空间。
一句话概括：给父容器加上
display: flex，子元素就能灵活地排列和对齐。
为什么要用 Flex？
在 Flex 出现之前，网页布局靠float+position，缺点：
- 垂直居中困难
- 多列等高麻烦
- 顺序调整需改 HTML
Flex 解决了这些痛点，是现代网页布局的首选方案。
二、核心概念：两个角色
Flex 布局中只有两个角色：
┌─────────────────────────────────┐ │ Flex Container（容器） │ ← 父元素：display: flex │ ┌────┐ ┌────┐ ┌────┐ │ │ │项目1│ │项目2│ │项目3│ │ ← 子元素：Flex Item │ └────┘ └────┘ └────┘ │ └─────────────────────────────────┘| 角色 | 英文 | 设置位置 | 作用 |
|---|---|---|---|
| 容器 | Container | 父元素 | 统一管理子元素的排列方式 |
| 项目 | Item | 子元素 | 各自可以有自己的伸缩规则 |
两条轴线（理解 Flex 的关键）
主轴 (main axis) → 方向由 flex-direction 决定 ┌──────────────────────────────────────┐ │ ┌────┐ ┌────┐ ┌────┐ │ 交叉轴 │ │ │ │ │ │ │ │ ( cross │ │ │ │ │ │ │ │ axis) │ └────┘ └────┘ └────┘ │ │ │ └──────────────────────────────────────┘- 主轴（main axis）：项目排列的方向（默认水平）
- 交叉轴（cross axis）：与主轴垂直的方向
三、容器属性（6 个常用）
1.flex-direction：主轴方向
决定项目沿着哪个方向排列。
.container{display:flex;flex-direction:row;/* 默认：水平从左到右 */flex-direction:row-reverse;/* 水平从右到左 */flex-direction:column;/* 垂直从上到下 */flex-direction:column-reverse;/* 垂直从下到上 */}2.justify-content：主轴对齐
控制项目在主轴方向的对齐与分布。
.container{display:flex;justify-content:flex-start;/* 靠左（默认） */justify-content:flex-end;/* 靠右 */justify-content:center;/* 居中 */justify-content:space-between;/* 两端对齐，首尾贴边 */justify-content:space-around;/* 每个项目左右间距相等 */justify-content:space-evenly;/* 所有间距完全相等 */}可视化效果：
flex-start: [■][■][■] center: [■][■][■] space-between: [■] [■] [■] space-around: [■] [■] [■] space-evenly: [■] [■] [■]3.align-items：交叉轴对齐
控制项目在交叉轴方向（单行）的对齐方式。
.container{display:flex;align-items:stretch;/* 拉伸填满（默认） */align-items:flex-start;/* 顶部对齐 */align-items:flex-end;/* 底部对齐 */align-items:center;/* 垂直居中 */align-items:baseline;/* 文字基线对齐 */}最经典用法：垂直水平双居中
.center-box{display:flex;justify-content:center;/* 主轴居中 */align-items:center;/* 交叉轴居中 */}4.flex-wrap：是否换行
.container{display:flex;flex-wrap:nowrap;/* 不换行，挤压项目（默认） */flex-wrap:wrap;/* 换行 */flex-wrap:wrap-reverse;/* 反向换行 */}5.align-content：多行交叉轴对齐
当项目换行了（多行），控制行与行之间的分布。
.container{display:flex;flex-wrap:wrap;align-content:flex-start;/* 多行靠顶部 */align-content:center;/* 多行整体居中 */align-content:stretch;/* 各行拉伸填满（默认） */align-content:space-between;/* 行与行两端对齐 */}注意：
align-content只在多行时生效，单行时用align-items。
6.flex-flow：方向 + 换行的简写
.container{flex-flow:row wrap;/* 等同于 flex-direction: row; flex-wrap: wrap; */}四、项目属性（5 个常用）
1.flex-grow：放大比例
当容器有剩余空间时，项目如何分配多余空间。
.item{flex-grow:0;/* 默认：不放大 */flex-grow:1;/* 等分剩余空间 */}/* 三个项目：第一个占 1 份，第二个占 2 份，第三个不放大 */.item1{flex-grow:1;}.item2{flex-grow:2;}.item3{flex-grow:0;}2.flex-shrink：缩小比例
当容器空间不足时，项目如何缩小。
.item{flex-shrink:1;/* 默认：等比缩小 */flex-shrink:0;/* 不缩小 */}3.flex-basis：项目基础大小
.item{flex-basis:200px;/* 项目主轴方向初始大小为 200px */flex-basis:auto;/* 默认：由内容决定 */}4.flex：简写（最常用）
.item{flex:1;/* 等同于 flex: 1 1 0% */flex:0 0 200px;/* 不放大不缩小，固定 200px */flex:auto;/* 等同于 flex: 1 1 auto */flex:none;/* 等同于 flex: 0 0 auto */}常用取值：
| 写法 | 含义 | 场景 |
|---|---|---|
flex: 1 | 等比分占剩余空间 | 自适应列 |
flex: 0 0 200px | 固定 200px，不伸缩 | 固定宽度的侧栏 |
flex: 2 1 0% | 放大比例 2 | 某列占两倍空间 |
5.order：排列顺序
.item1{order:2;}/* 排第二 */.item2{order:1;}/* 排第一（数字越小越靠前） */.item3{order:3;}/* 排第三 */默认
order: 0，可以用负数。
6.align-self：单个项目的交叉轴对齐
覆盖容器的align-items。
.item2{align-self:center;/* 只有这个项目垂直居中 */}五、常用布局案例
案例 1：水平垂直居中（最经典）
<divclass="box">居中文字</div>.box{display:flex;justify-content:center;align-items:center;width:300px;height:200px;background:#2c7a4b;color:white;}案例 2：导航栏
<navclass="nav"><ahref="#">首页</a><ahref="#">产品</a><ahref="#">新闻</a><ahref="#"style="margin-left:auto;">联系我们</a></nav>.nav{display:flex;align-items:center;gap:20px;height:60px;padding:0 20px;background:#333;}.nav a{color:white;text-decoration:none;}技巧：
margin-left: auto可以把"联系我们"推到最右边。
案例 3：卡片网格（自适应换行）
<divclass="cards"><divclass="card">卡片1</div><divclass="card">卡片2</div><divclass="card">卡片3</div><divclass="card">卡片4</div></div>.cards{display:flex;flex-wrap:wrap;gap:15px;}.card{flex:1 1 200px;/* 最小 200px，可伸缩 */height:120px;background:#e3f2e1;border-radius:8px;display:flex;align-items:center;justify-content:center;}案例 4：左右分栏（侧栏固定+主内容自适应）
<divclass="layout"><asideclass="sidebar">侧边栏 200px</aside><mainclass="main">主内容自适应</main></div>.layout{display:flex;gap:20px;}.sidebar{flex:0 0 200px;/* 固定 200px */background:#f0f0f0;}.main{flex:1;/* 占据剩余空间 */background:#e3f2e1;}案例 5：图文并排
<divclass="item"><imgsrc="img/avatar.png"alt=""><div><h3>用户名</h3><p>个人简介文字...</p></div></div>.item{display:flex;align-items:center;gap:15px;}.item img{width:60px;height:60px;border-radius:50%;}六、Flex 速查表
容器属性
| 属性 | 常用值 | 作用 |
|---|---|---|
flex-direction | row/column | 主轴方向 |
justify-content | center/space-between | 主轴对齐 |
align-items | center/stretch | 交叉轴对齐 |
flex-wrap | wrap/nowrap | 是否换行 |
align-content | center/stretch | 多行交叉轴对齐 |
项目属性
| 属性 | 常用值 | 作用 |
|---|---|---|
flex | 1/0 0 200px | 伸缩简写 |
flex-grow | 0/1/2 | 放大比例 |
flex-shrink | 0/1 | 缩小比例 |
flex-basis | 200px/auto | 基础大小 |
order | 整数 | 排列顺序 |
align-self | center/flex-start | 单独对齐 |
七、教学建议
- 先画轴线：讲 Flex 之前一定要在黑板上画出"主轴"和"交叉轴"，学生才能理解
justify-content和align-items的区别。 - 动手演示：在浏览器开发者工具中勾选/取消 Flex 属性，让学生实时看到效果变化，比纯理论更直观。
- 从常用入手：
justify-content、align-items、flex这三个属性覆盖了 80% 的使用场景，优先讲透。 - 对比 float：用"垂直居中"这个经典痛点做对比——float 需要 3 行 hack，Flex 只需 1 行，学生立刻能体会 Flex 的优势。
