前端编程课程二十、：CSS布局四-洪萨配资

现代布局——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>