Flex多列布局核心是设容器display:flex，用flex-direction、flex-wrap和子项flex属性控制排列；三栏等宽用flex:1而非width百分比；两栏自适应推荐flex简写组合；响应式切换需配合flex-wrap和媒体查询。
flex 实现多列布局的核心思路
用 display: flex 做多列，本质是让容器成为弹性盒子，子元素自动沿主轴排列。不需要计算浮动或定位偏移，也不依赖栅格系统，适合内容列数固定、宽度可变的初级项目（比如博客侧边栏 + 主内容、三栏卡片展示）。
关键在于控制容器的 flex-direction（默认 row，横向分栏）、flex-wrap（是否换行）和子项的 flex（分配剩余空间）。
三栏等宽布局的写法与常见错误
最常写的「三栏等宽」，不是靠 width: 33.33%，而是用 flex: 1 让三列均分容器宽度。手动写百分比容易因 border/padding/margin 导致溢出，flex 自动处理盒模型。
- 忘记给父容器设
display: flex—— 子项完全不响应flex相关属性 - 子项设置了
width又设flex: 1——flex会覆盖width，但容易引发理解混乱 - 没重置
margin或box-sizing—— 默认box-sizing: content-box会让 padding/border 撑出容器
.container {
display: flex;
}
.column {
flex: 1;
box-sizing: border-box;
padding: 1rem;
}
/* 不需要 width，也不需要 float/clearfix */两栏自适应（主内容 + 侧边栏）怎么配比例
主内容占大份、侧边栏固定或小份时，避免用像素值死锁。推荐组合使用 flex 的三个参数：flex-grow、flex-shrink、flex-basis，简写为 flex: <grow><shrink><basis></basis></shrink></grow>。
立即学习“前端免费学习笔记（深入）”；
-
flex: 3等价于flex: 3 1 0：优先放大，可缩小，初始宽度为 0（完全由 grow 分配） -
flex: 0 0 250px：不放大、不缩小、固定 250px（适合广告栏、导航栏） -
flex: 1 1 200px：可放大可缩小，基础宽度 200px（更稳妥的自适应侧边栏）
.layout {
display: flex;
}
.main { flex: 3; }
.sidebar { flex: 0 0 250px; }响应式断点下 flex 列数切换的注意事项
用媒体查询改 flex-direction 是最轻量的方式：桌面横排 → 移动端竖排。但要注意，flex-wrap: wrap 才支持「多行」，否则单行溢出不会折行。
- 只改
flex-direction: column不够 —— 如果子项总高度超容器，依然会溢出，需配合height或overflow - 想在中屏实现「两栏」、大屏「三栏」？用
flex-basis配合min-width更可靠，而不是靠flex: 1强撑 - IE10/11 对
flex-wrap支持不全，若需兼容，建议降级为display: block+width百分比
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.column { flex-basis: 50%; }
}
@media (min-width: 1025px) {
.column { flex-basis: 33.33%; }
}实际项目里最容易卡住的，不是语法写错，而是没意识到 flex 的分配逻辑基于「剩余空间」——只要子项有固有尺寸（比如图片、文字撑开的宽高）、或设置了 min-width/max-width，就会干扰等分布局。动手前先检查子项的自然尺寸和约束条件。
