弹性布局模板

上下分栏

// 父容器 - 弹性布局 .parent-container { display: flex; flex-direction: column; // 垂直排列 height: 100%; // 或固定高度 // 自适应区域（会占据剩余空间） .auto-area { flex: 1; min-height: 0; // 关键：允许收缩 overflow: auto; // 内容过多时滚动 } // 固定/可控区域 .fixed-area { flex-shrink: 0; // 不收缩 max-height: 50%; // 限制最大高度 overflow: auto; } }

左中右三栏

.container { display: flex; flex-direction: row; // 水平排列 .left-sidebar { width: 200px; // 固定宽度 flex-shrink: 0; } .main-content { flex: 1; // 中间自适应 min-width: 0; } .right-sidebar { width: 250px; flex-shrink: 0; } }

头部固定+内容滚动

.container { display: flex; flex-direction: column; .header { height: 60px; flex-shrink: 0; // 头部固定 } .content { flex: 1; overflow: auto; // 内容区域滚动 } }