使用CSS Flexbox可高效实现响应式分栏布局。首先设置容器display: flex，子元素通过flex属性灵活分配空间，如两栏布局中侧边栏固定宽度、主内容区用flex: 1占满剩余空间；多等宽栏则为每栏设flex: 1实现均分；不等宽栏可通过flex比例或具体数值控制宽度，结合gap属性统一管理间距；在小屏幕上利用媒体查询将flex-direction设为column，使各栏垂直堆叠，适配移动设备。掌握flex、gap和flex-direction等核心属性，即可轻松构建各类自适应布局。
使用CSS Flexbox实现分栏布局非常直观且高效，特别适合响应式设计。Flexbox的核心是让容器内的子元素能够灵活地分配空间，自动适应不同屏幕尺寸。下面通过几个常见场景，带你掌握Flex基础在分栏布局中的实际应用。
1. 基础两栏布局
最常见的分栏布局是将页面分为左右两部分，比如侧边栏和主内容区。
HTML结构：
CSS样式：
立即学习“前端免费学习笔记（深入）”；
.container {display: flex;
}
.sidebar {
width: 200px;
background: #f0f0f0;
}
.content {
flex: 1;
background: #e0e0e0;
}
说明：容器设置 display: flex 后，子元素水平排列。flex: 1 让主内容区域占据剩余所有空间。
2. 自适应多栏等宽布局
希望三栏或更多栏平均分配宽度，可以利用 flex: 1 的均分特性。
HTML：
栏目1
栏目2
栏目3
CSS：
.row {display: flex;
}
.col {
flex: 1;
padding: 20px;
background: #ddd;
margin: 5px;
}
每个 .col 设置 flex: 1，它们会平分父容器的可用宽度，无论屏幕大小如何变化。
3. 不等宽分栏与间距控制
有时需要某一栏更宽，比如左侧窄导航，右侧主内容占70%。
可以使用 flex 属性的缩写形式：flex: grow shrink basis。
.sidebar {flex: 1 0 20%;
}
.content {
flex: 2 0 70%;
}
这里左侧占20%，右侧占70%，剩下的空间按比例伸缩。也可以直接用数字比例：
.sidebar { flex: 1; }.content { flex: 3; }
结合 gap 属性轻松添加列间距：
.row {display: flex;
gap: 16px;
}
无需再用 margin 调整间隙，更整洁。
4. 响应式堆叠布局
在小屏幕上，我们可能希望分栏垂直堆叠。配合媒体查询即可实现。
@media (max-width: 768px) {.container {
flex-direction: column;
}
}
当屏幕小于768px时，原本横向排列的栏变为纵向排列，更适合手机浏览。
基本上就这些。掌握 display: flex、flex 属性和 gap，就能快速构建各种分栏布局。关键是理解容器与项目的协作关系，灵活运用伸缩比例。不复杂但容易忽略细节，多练习几种组合会更熟练。
