display: flex 是现代侧边栏布局必须打底的方案，因其天然支持响应式收缩/展开、避免文档流脱离、保障可访问性；浮动和绝对定位则易导致塌陷、滚动异常及屏幕阅读器失效。
display: flex 是现代侧边栏布局最直接有效的起点，不是“选一个”，而是“必须用它打底”。
为什么不能只靠 float 或 position: absolute
浮动布局要手动 clear，侧边栏高度不一致时容易塌陷；绝对定位会让内容区脱离文档流，滚动、打印、屏幕阅读器都可能出问题。更关键的是：它们无法响应式收缩/展开侧边栏——你得写 JS 模拟，而 Flex 天然支持。
flex 侧边栏的最小可靠结构
核心就两行 CSS：
.layout {
display: flex;
}
.sidebar { flex: 0 0 240px; } /* 不缩放、不增长、固定宽 */
.main { flex: 1; } /* 剩余空间全占 */
- 必须给父容器设
display: flex，否则子元素的flex值完全无效 -
flex: 0 0 240px比width: 240px更安全：它明确禁止缩放，避免内容挤压变形 - 如果主内容区含长 URL 或未换行文本，加
min-width: 0到.main，否则 Flex 默认不截断，会撑破容器
响应式收起侧边栏怎么写
用媒体查询 + flex-direction: column 最省事：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.layout { flex-direction: column; }
.sidebar { order: -1; } /* 顶到最上面 */
}
- 别用
display: none隐藏再显示——会破坏 DOM 顺序，影响键盘 Tab 焦点和屏幕阅读器流 -
order控制视觉顺序，不影响 HTML 结构，可访问性友好 - 移动端优先时，把
flex-direction: column设为默认，大屏再切回row
Grid 布局适合什么场景
当你要严格控制侧边栏、顶部导航、底部工具栏、中间内容区四块区域的位置和尺寸时，display: grid 更清晰：
.layout {
display: grid;
grid-template-rows: 60px 1fr 50px;
grid-template-columns: 240px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
/* ...其余同理 */
-
grid-template-areas写起来直观，但改一个名字就得全局同步——维护成本高 - 更推荐线性定义：
grid-template-columns: 240px 1fr+grid-column: 1显式控制，后续加新模块不用动模板字符串 - IE11 不支持 Grid，若需兼容，
flex是唯一稳妥 fallback
侧边栏布局真正的复杂点不在“怎么放上去”，而在“怎么让它不干扰内容流、不破坏可访问性、不卡死在某个宽度”。Flex 的 flex-shrink: 0 和 Grid 的 minmax() 这类细节，才是实际项目里最常漏掉又最难 debug 的地方。
