一、核心布局需求与场景
该布局常见于：
- 侧边栏+主内容区（如管理系统）
- 固定导航+动态内容
- 表单标签+输入框（标签固定宽度，输入框自适应）
二、CSS实现方案（按兼容性排序）
1. Flex布局（现代首选）
.container {
display: flex;
}
.left {
width: 200px; /* 固定宽度 */
flex-shrink: 0; /* 禁止缩小 */
}
.right {
flex: 1; /* 自适应剩余空间 */
}
- 原理：
flex: 1表示占据剩余所有空间，等价于flex-grow: 1 flex-shrink: 1 flex-basis: 0%。
2. Grid布局（更简洁）
.container {
display: grid;
grid-template-columns: 200px 1fr; /* 左固定右自适应 */
}
- 优势：二维布局，代码量更少，
1fr表示1份剩余空间。
3. 绝对定位+margin（兼容性好）
.container {
position: relative;
}
.left {
position: absolute;
left: 0;
width: 200px;
}
.right {
margin-left: 200px; /* 预留左边空间 */
}
- 注意：父容器需声明
position: relative，且右侧内容需处理滚动（如overflow-x: auto）。
4. Float+Overflow（传统方案）
.left {
float: left;
width: 200px;
}
.right {
overflow: hidden; /* 触发BFC，避免高度塌陷 */
}
- 缺点：需额外处理父容器高度（如添加 clearfix），不推荐现代项目。
三、问题
1. 问：flex: 1 的具体含义？
- 答：
flex: 1是flex-grow: 1 flex-shrink: 1 flex-basis: 0%的缩写；flex-grow: 1表示占据剩余空间，flex-shrink: 1允许缩小，flex-basis: 0%初始尺寸为0。
2. 问：grid布局中1fr的计算方式？
- 答：
1fr代表1份弹性空间，n个fr单位按比例分配剩余空间；- 示例：
grid-template-columns: 200px 1fr 2fr→ 右侧两列按1:2分配剩余宽度。
3. 问：绝对定位方案的优缺点？
- 答：
- 优点：兼容性好（IE8+），右侧内容可独立滚动；
- 缺点：左侧脱离文档流，需手动计算
margin，不适合响应式场景。
四、响应式优化方案
.container {
display: flex;
}
.left {
width: 200px;
flex-shrink: 0;
}
.right {
flex: 1;
}
/* 小屏时侧边栏隐藏或变为顶部导航 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.left {
width: 100%;
margin-bottom: 16px;
}
}
五、方案对比与场景选择
| 方案 | 兼容性 | 代码量 | 响应式支持 | 推荐场景 |
|---|---|---|---|---|
| flex布局 | IE10+ | 少 | 优 | 现代项目，首选方案 |
| grid布局 | 现代浏览器 | 最少 | 优 | 高级布局，需二维适配 |
| 绝对定位 | IE8+ | 中 | 差 | 兼容性要求高，静态布局 |
| float布局 | 全浏览器 | 中 | 差 | legacy项目，不推荐 |
