使用Flexbox或Grid可实现左右侧边栏布局。1. Flexbox通过display:flex让主内容区flex:1自适应，侧边栏固定宽且flex-shrink:0防压缩；2. Grid用grid-template-columns:200px 1fr 200px定义三列；3. 浮动法需float:left和margin留白；4. 响应式建议移动端设flex-direction:column。推荐优先采用Flexbox或Grid方案。
要实现左右侧边栏布局，可以通过多种 CSS 方法来完成。核心思路是让左侧和右侧的侧边栏固定宽度，中间内容区域自适应剩余空间。以下是几种常见且实用的实现方式。
使用 Flexbox 布局
Flexbox 是现代布局中最简单、最灵活的方式之一，适合实现三栏布局。
HTML 结构：
<div class="container">
<aside class="sidebar left">左侧边栏</aside>
<main class="content">主内容区</main>
<aside class="sidebar right">右侧边栏</aside>
</div>
CSS 样式：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
height: 100vh;
}
.sidebar {
width: 200px;
background: #f0f0f0;
}
.left {
flex-shrink: 0;
}
.right {
flex-shrink: 0;
}
.content {
flex: 1;
background: #fff;
}
说明：通过 display: flex 让容器内元素水平排列。flex: 1 的主内容区会自动填充剩余空间，flex-shrink: 0 防止侧边栏被压缩。
使用 CSS Grid 布局
Grid 布局更强大，适合复杂二维布局，但用于三栏也非常简洁。
CSS 示例：
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
height: 100vh;
}
.left {
background: #ddeeff;
}
.content {
background: #ffffff;
}
.right {
background: #f0f0f0;
}
说明：grid-template-columns 定义了三列，左右固定 200px，中间用 1fr 占据剩余空间。
使用浮动（传统方法）
虽然较老，但在兼容旧浏览器时仍有用途。
.sidebar {
width: 200px;
height: 100vh;
float: left;
}
.left {
background: #ddeeff;
}
.right {
background: #f0f0f0;
}
.content {
margin: 0 200px;
height: 100vh;
}
注意：浮动需要清除影响，且主内容区通过 margin 留出侧边栏空间。现代开发中建议优先使用 Flex 或 Grid。
响应式调整建议
在小屏幕上，可考虑将侧边栏隐藏或变为上下结构。
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar,
.content {
width: 100%;
}
}
这样在移动端能更好展示内容。
基本上就这些。推荐使用 Flexbox 或 Grid 实现，代码简洁，维护方便，兼容性也好。根据项目需求选择合适方案即可。
