侧边栏与主内容布局是网页设计中最基础的结构之一，传统实现方式多依赖浮动或者定位，存在兼容性和维护成本高的问题。结合Flex和Grid两种现代CSS布局技术，可以轻松实现响应式、易维护的布局效果。
Flex与Grid的核心特性
Flex布局是一维布局模型，适合处理行或列方向上的元素排列、对齐和空间分配，对于侧边栏和主内容的横向排列场景非常适配。Grid布局是二维布局模型，可以同时控制行和列的排列，适合内部区域的精细化划分。
将两者结合的核心思路是：用Flex处理外层侧边栏和主内容的横向排列，用Grid处理主内容区域内部的复杂布局，充分发挥两种技术的优势。
基础侧边栏与主内容布局实现
首先搭建基础的HTML结构，侧边栏和主内容作为外层容器的直接子元素：
<div class="layout-container">
<aside class="sidebar">
<h3>侧边栏</h3>
<ul>
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
</aside>
<main class="main-content">
<h2>主内容区域</h2>
<p>这里是页面的核心内容部分</p>
</main>
</div>
接下来使用Flex实现外层容器的布局，让侧边栏和主内容横向排列，侧边栏固定宽度，主内容占据剩余空间：
.layout-container {
display: flex;
min-height: 100vh; /* 让容器占满整个视口高度 */
gap: 20px; /* 侧边栏和主内容之间的间距 */
padding: 20px;
box-sizing: border-box;
}
.sidebar {
width: 240px; /* 侧边栏固定宽度 */
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
}
.main-content {
flex: 1; /* 主内容占据剩余所有空间 */
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
主内容区域使用Grid实现内部布局
如果主内容区域内部需要分成多行多列，比如顶部有标题栏，中间是内容卡片网格，底部是分页区域，就可以用Grid来布局主内容内部：
.main-content {
flex: 1;
display: grid;
grid-template-rows: auto 1fr auto; /* 三行：标题行、内容行、分页行 */
grid-template-columns: 1fr; /* 单列 */
gap: 20px;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.content-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 自适应卡片列数 */
gap: 16px;
}
.card {
background-color: #fafafa;
padding: 16px;
border-radius: 6px;
border: 1px solid #eee;
}
对应的HTML结构补充主内容内部的Grid子元素：
<main class="main-content">
<header class="content-header">
<h2>主内容区域</h2>
</header>
<section class="content-cards">
<div class="card">卡片内容1</div>
<div class="card">卡片内容2</div>
<div class="card">卡片内容3</div>
</section>
<footer class="content-footer">
<p>分页区域</p>
</footer>
</main>
响应式适配方案
在移动端场景下，侧边栏和主内容需要变成纵向排列，此时只需要给外层容器添加媒体查询，修改Flex的方向即可：
@media (max-width: 768px) {
.layout-container {
flex-direction: column; /* 小屏幕下纵向排列 */
}
.sidebar {
width: 100%; /* 侧边栏占满宽度 */
}
}
方案优势总结
- 外层用Flex处理侧边栏和主内容的排列，逻辑清晰，易于实现空间分配和响应式切换
- 内层主内容用Grid处理复杂二维布局，能快速实现卡片网格、多区域划分等需求
- 两种技术都是现代浏览器原生支持，不需要额外引入库，性能更好
- 代码结构清晰，后期维护和扩展成本更低
注意：如果需要兼容IE10及以下浏览器，这种方案不适用，需要改用传统的浮动或者定位布局。现代项目一般可以放心使用Flex和Grid的组合方案。