现代布局——Flexbox 弹性盒模型（一维布局首选）
第一节：Flexbox 核心概念
1.1 为什么需要Flexbox？
✅ 垂直居中需要复杂的计算；
✅ 元素无法自动均分剩余空间；
✅ 换行需要额外处理；
✅ 一维布局（行/列）的“终极解决方案”；
✅ 轻松实现居中、均分、自适应；
✅ 代码简洁，无兼容性问题（IE10+支持）。
1.2 Flexbox 核心术语
- Flex容器：设置display: 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不生效”等问题。
