现代布局------Flexbox 弹性盒模型（一维布局首选）
第一节：Flexbox 核心概念
1.1 为什么需要Flexbox？
- 传统布局（浮动+定位）的痛点：
✅ 垂直居中需要复杂的计算；
✅ 元素无法自动均分剩余空间；
✅ 换行需要额外处理；
- Flexbox的核心优势：
✅ 一维布局（行/列）的"终极解决方案"；
✅ 轻松实现居中、均分、自适应；
✅ 代码简洁，无兼容性问题（IE10+支持）。
1.2 Flexbox 核心术语
- Flex容器 ：设置display: flex的元素（父元素）；
- Flex项目：Flex容器的直接子元素；
- 主轴：项目排列的方向（默认水平，从左到右）；
- 交叉轴：与主轴垂直的方向（默认垂直，从上到下）；
- 主轴方向控制 ：flex-direction: row | row-reverse | column | column-reverse。
第二节：Flex容器的核心属性
|-----------------|---------------|-------------------------------------------------------------------|
| 属性 | 作用 | 常用取值 |
| display | 转为Flex容器 | flex（块级）/ inline-flex（行内块） |
| flex-direction | 控制主轴方向 | row（默认）/ column / row-reverse / column-reverse |
| justify-content | 主轴对齐方式 | flex-start / center / space-between / space-around / space-evenly |
| align-items | 交叉轴对齐方式 | stretch（默认）/ center / flex-start / flex-end / baseline |
| flex-wrap | 项目是否换行 | nowrap（默认）/ wrap / wrap-reverse |
| align-content | 多轴对齐（仅wrap生效） | flex-start / center / space-between / stretch |
2.1 核心实战1：元素水平垂直居中（最简方案）
|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <div class="center-box"> <div class="center-item">我是居中的元素</div> </div> <style> .center-box { width: 300px; height: 200px; border: 1px solid #eee; display: flex; /* 关键1：转为Flex容器 */ justify-content: center; /* 关键2：主轴居中 */ align-items: center; /* 关键3：交叉轴居中 */ } .center-item { padding: 10px 20px; background-color: #e3f2fd; } </style> |
2.2 核心实战2：导航栏布局（空间均分）
|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <nav class="flex-nav"> <a href="#" class="nav-item">首页</a> <a href="#" class="nav-item">课程</a> <a href="#" class="nav-item">学习路径</a> <a href="#" class="nav-item">关于我们</a> </nav> <style> .flex-nav { display: flex; justify-content: space-around; /* 项目均匀分布 */ background-color: #2196f3; padding: 15px 0; } .nav-item { color: #fff; text-decoration: none; padding: 5px 10px; border-radius: 4px; transition: background 0.2s; } .nav-item:hover { background-color: #1976d2; } </style> |
2.3 核心实战3：自适应布局（侧边栏固定+主内容自适应）
|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <div class="flex-container"> <aside class="sidebar">侧边栏（200px）</aside> <main class="main">主内容（自动填充）</main> </div> <style> .flex-container { display: flex; height: 400px; border: 1px solid #eee; } .sidebar { width: 200px; background-color: #e3f2fd; padding: 10px; } .main { flex: 1; /* 关键：自动填充剩余空间 */ background-color: #f5f5f5; padding: 10px; } </style> |
第三节：Flex项目的核心属性
|-------------|-----------|------------------------------------|
| 属性 | 作用 | 常用取值 |
| flex-grow | 项目放大比例 | 0（默认，不放大）/ 1 / 2... |
| flex-shrink | 项目缩小比例 | 1（默认，允许缩小）/ 0（不缩小） |
| flex-basis | 项目初始尺寸 | auto（默认）/ 100px / 50% |
| flex | 复合属性 | flex: 1（等价于1 1 0%）/ none（0 0 auto） |
| align-self | 单个项目交叉轴对齐 | 覆盖容器的align-items，取值相同 |
3.1 实战：项目按比例分配空间
|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <div class="flex-box"> <div class="item item1">1份</div> <div class="item item2">2份</div> <div class="item item3">3份</div> </div> <style> .flex-box { display: flex; width: 600px; height: 100px; border: 1px solid #eee; } .item { line-height: 100px; text-align: center; color: #fff; } .item1 { flex: 1; background-color: #2196f3; } .item2 { flex: 2; background-color: #ff4444; } .item3 { flex: 3; background-color: #00c851; } </style> |
第四节：课堂练习与答疑
- 用Flex实现"商品列表"：每行显示4个卡片，自适应宽度，换行；
- 用Flex实现"表单布局"：标签左对齐，输入框占剩余空间；
- 答疑：解决"Flex项目换行后间距异常""flex:1不生效"等问题。