css网页侧边栏固定宽度主内容自适应如何实现_使用Flexbox或Grid
使用 Flexbox 或 CSS Grid 均可实现侧边栏固定、主内容自适应的布局。1. Flexbox：设置容器 display: flex，侧边栏定宽，主内容 flex: 1 占据剩余空间；2. Grid：通过 grid-template-columns: 240px 1fr 定义两列，第一列固定，第二列自适应。前者兼容性好，适合流式内容；后者结构控制更精确，易于扩展。避免为自适应区域设置 width 以防破坏伸缩性。
: 1 占据剩余空间；2. Grid：通过 grid-template-columns: 240px 1fr 定义两列，第一列固定，第二列自适应。前者兼容性好，适合流式内容；后者结构控制更精确，易于扩展。避免为自适应区域设置 width 以防破坏伸缩性。要实现侧边栏固定宽度、主内容区域自适应的布局，使用 Flexbox 或 CSS Grid 都非常高效。下面分别介绍两种方法，帮助你快速搭建响应式结构。
使用 Flexbox 实现
Flexbox 是一维布局模型，适合处理这种“一侧固定、一侧填充”的常见布局需求。
HTML 结构：
侧边栏
CSS 样式：
.layout {display: flex;
}
.sidebar {
width: 240px; /* 固定宽度 */
background: #f0f0f0;
}
.content {
flex: 1; /* 占据剩余空间 */
background: #fff;
}
说明：将容器设为 display: flex，侧边栏设置固定宽度，主内容使用 flex: 1 自动伸展填满剩余区域。这种方式兼容性好，代码简洁。
使用 CSS Grid 实现
Grid 是二维布局系统，更适合复杂结构，但处理这种简单布局也十分直观。
HTML 结构相同：
侧边栏
CSS 样式：
.layout {display: grid;
grid-template-columns: 240px 1fr; /* 第一列固定，第二列自适应 */
}
.sidebar {
background: #f0f0f0;
}
.content {
background: #fff;
}
说明：grid-template-columns: 240px 1fr 表示第一列宽 240px，第二列占据剩余空间（1fr = 一份可用空间）。语义清晰，易于扩展多区域布局。
选择建议
如果只是简单的一行两列布局，两者都可以，按项目习惯选择：
- 用 Flexbox 更传统，适合内容流式排列
- 用 Grid 更现代，结构控制更精确
- 在需要嵌套或响应式断点时，Grid 的媒体查询配合更灵活
基本上就这些。不复杂但容易忽略细节，比如避免给自适应区域设 width，否则会破坏伸缩性。
