使用 Flexbox 实现多列自适应布局：设置父容器 display: flex，子元素通过 flex 属性自动分配空间，flex-wrap: wrap 允许换行，结合 gap 控制间距；等宽布局设所有子项 flex: 1；不等宽时固定列用 flex: 0 0 宽度，自适应列用 flex: 1；响应式下通过媒体查询或 flex-basis 控制换行，实现移动端堆叠。
使用 Flexbox 实现多列自适应布局非常简单且高效，无需计算具体宽度，容器内的子元素会自动根据可用空间进行伸缩和排列。
基本结构与核心属性
要实现多列自适应，先设置父容器为 Flexbox 布局：
• 将父元素的 display 设为 flex• 子元素默认在一行内显示，可通过 flex 属性控制占比
• 使用 flex-wrap: wrap 允许换行（适用于响应式）
示例代码：
.container {
display: flex;
flex-wrap: wrap; /* 允许子项换行 */
gap: 16px; /* 列间距，现代浏览器支持 */
}
<p>.column {
flex: 1; /<em> 平均分配可用空间 </em>/
}</p>等宽多列布局
让每列宽度相等并自动填充容器：
立即学习“前端免费学习笔记（深入）”；
• 所有子项设置相同的 flex: 1• 容器有多少列，每列就占多少比例（如三列各占 1/3）
例如三列等宽：
.container {
display: flex;
gap: 10px;
}
<p>.col {
flex: 1;
background: #f0f0f0;
padding: 20px;
}</p>不等宽自适应布局
某些列固定宽度，其余列自适应伸缩：
• 自适应列使用 flex: 1
常见场景：侧边栏固定 + 主内容区自适应
.layout {
display: flex;
gap: 15px;
}
<p>.sidebar {
flex: 0 0 200px; /<em> 不增长、不收缩、基础宽度200px </em>/
}</p><p>.main-content {
flex: 1; /<em> 占据剩余所有空间 </em>/
}</p>响应式多列（移动端友好）
结合媒体查询和 flex-wrap，让列在小屏幕上堆叠：
• 设置 flex-direction: column 在小屏下垂直排列• 或调整 flex-basis 控制换行时机
示例：桌面端三列，移动端单列
.responsive-columns {
display: flex;
flex-wrap: wrap;
}
<p>.responsive-columns > div {
flex: 1 1 300px; /<em> 最小宽度约300px，达到后换行 </em>/
}</p>当容器宽度不足时，列会自动换行堆叠，实现响应式效果。
基本上就这些，Flexbox 的弹性特性让多列布局变得直观又灵活。关键在于合理使用 flex 缩写（grow/shrink/basis）和 flex-wrap 控制流式行为。
