在网页前端开发中，主次内容区域布局是绝大多数页面都会用到的结构，比如常见的左侧侧边栏为主区域、右侧内容区为次区域，或者顶部导航为主、下方内容为辅的布局形式。使用CSS的Flexbox弹性布局可以非常简洁地实现这类结构，并且能够通过flex-grow和flex-shrink属性灵活调整不同区域的空间分配和缩放行为。
Flexbox布局基础设置
要实现主次内容区域布局，首先需要给外层容器设置display: flex属性，将其定义为弹性容器，内部的直接子元素会自动成为弹性项目。弹性容器默认的主轴是水平方向，弹性项目会沿主轴排列，我们可以通过flex-direction调整主轴方向，通过justify-content和align-items调整项目的对齐方式。
以下是一个基础的主次布局容器示例，我们设置容器为水平方向的弹性布局，高度占满整个视口：
/* 外层弹性容器样式 */
.main-container {
display: flex;
height: 100vh;
/* 主轴为水平方向，项目从左到右排列 */
flex-direction: row;
/* 项目在主轴上两端对齐，中间留空 */
justify-content: space-between;
/* 项目在交叉轴上拉伸占满容器高度 */
align-items: stretch;
}
flex-grow属性调整空间占比
flex-grow属性定义弹性项目的放大比例，默认值为0，表示即使存在剩余空间也不会放大。当容器的主轴方向上有剩余空间时，所有flex-grow值大于0的项目会按照比例分配剩余空间。
比如我们要实现左侧主区域占2份，右侧次区域占1份的布局，就可以给主区域设置flex-grow: 2，次区域设置flex-grow: 1，剩余空间会按照2:1的比例分配给两个区域。
对应的HTML结构和样式代码如下：
<div class="main-container">
<div class="primary-content">
这是主内容区域，会占据更多空间
</div>
<div class="secondary-content">
这是次内容区域，占据较少空间
</div>
</div>
/* 主内容区域样式 */
.primary-content {
/* 放大比例为2 */
flex-grow: 2;
background-color: #f0f0f0;
padding: 20px;
}
/* 次内容区域样式 */
.secondary-content {
/* 放大比例为1 */
flex-grow: 1;
background-color: #e0e0e0;
padding: 20px;
}
如果容器没有剩余空间，flex-grow属性不会生效，此时需要结合flex-shrink属性处理空间不足的情况。
flex-shrink属性控制缩放规则
flex-shrink属性定义弹性项目的缩小比例，默认值为1，表示当容器空间不足时，项目会等比缩小。如果设置为0，表示空间不足时项目不会缩小。
我们可以通过flex-shrink调整不同区域在空间不足时的缩放优先级，比如让次内容区域优先缩小，主内容区域尽量保持原有大小，就可以给主区域设置flex-shrink: 0，次区域设置flex-shrink: 1。
修改后的次区域样式如下：
/* 次内容区域样式，空间不足时优先缩小 */
.secondary-content {
flex-grow: 1;
/* 缩小比例为1，空间不足时缩小 */
flex-shrink: 1;
/* 设置最小宽度，避免缩小到无法显示内容 */
min-width: 200px;
background-color: #e0e0e0;
padding: 20px;
}
/* 主内容区域样式，空间不足时不缩小 */
.primary-content {
flex-grow: 2;
/* 缩小比例为0，空间不足时不缩小 */
flex-shrink: 0;
/* 设置固定宽度，避免被压缩 */
width: 600px;
background-color: #f0f0f0;
padding: 20px;
}
flex简写属性的使用
实际开发中我们通常会使用flex简写属性来同时设置flex-grow、flex-shrink和flex-basis，语法为flex: flex-grow flex-shrink flex-basis，其中后两个属性可以省略，默认值为flex: 0 1 auto。
比如上面的主次区域布局可以用简写属性改写为：
.primary-content {
/* 等价于 flex-grow:2, flex-shrink:0, flex-basis:600px */
flex: 2 0 600px;
background-color: #f0f0f0;
padding: 20px;
}
.secondary-content {
/* 等价于 flex-grow:1, flex-shrink:1, flex-basis:auto */
flex: 1 1 auto;
min-width: 200px;
background-color: #e0e0e0;
padding: 20px;
}
常见布局场景示例
除了水平方向的主次布局，我们还可以调整flex-direction实现垂直方向的主次布局，比如顶部导航为主区域，下方内容区域为次区域：
/* 垂直方向弹性容器 */
.vertical-container {
display: flex;
height: 100vh;
/* 主轴改为垂直方向 */
flex-direction: column;
}
/* 顶部主区域 */
.top-header {
flex: 0 0 80px;
background-color: #333;
color: white;
display: flex;
align-items: center;
padding: 0 20px;
}
/* 下方次内容区域 */
.bottom-content {
flex: 1 1 auto;
background-color: #f5f5f5;
padding: 20px;
}
对应的HTML结构为：
<div class="vertical-container">
<div class="top-header">
顶部导航区域
</div>
<div class="bottom-content">
下方内容区域
</div>
</div>
注意事项
- 使用
flex-grow和flex-shrink时，建议给弹性项目设置min-width或min-height，避免项目缩小到无法显示内容。 flex-basis属性定义项目在分配剩余空间之前的主轴大小，默认值为auto，即项目本身的大小，设置具体数值可以更准确控制初始大小。- 如果弹性容器内只有一个项目，设置
flex-grow: 1可以让该项目占满整个容器的剩余空间，常用于全屏内容布局。
Flexbox的弹性特性非常适合处理动态内容的主次布局，相比传统的浮动和定位布局，代码更简洁，适配性更好，是前端布局的首选方案之一。
Flexboxflex-growflex-shrink主次内容区域布局CSS布局修改时间：2026-06-25 20:33:39