只写display: flex无法分宽，因缺乏高度基准和尺寸约束；须设根容器min-height: 100vh，侧边栏用width: 240px，主内容区用flex: 1，折叠时通过width过渡实现平滑响应。
为什么只写 display: flex 侧边栏和主内容区不按预期分宽？
因为 flex 容器默认不分配高度上下文，也不自动约束子项尺寸行为。光写 display: flex 只是开启了弹性布局，但没告诉浏览器“谁该固定、谁该撑满、整体多高”。结果往往是侧边栏被内容撑开、主区域溢出或高度塌陷。
- 必须给根容器（比如
.layout）设height: 100vh或min-height: 100vh，否则flex: 1没参考基准 - 侧边栏用
width: 240px（别用flex-basis或flex: 0 0 240px—— 多余且易被误覆盖） - 主内容区必须用
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%），不能只写flex-grow: 1 - 避免在侧边栏上设
flex: 0 0 auto，它会触发内容宽度计算，导致折叠时宽度不稳定
折叠侧边栏时主内容区“弹一下”，怎么平滑过渡？
直接 display: none 或硬切 width 会让 Flex 重新计算布局流，造成视觉跳变。真正稳的方案是让宽度变化参与 CSS 过渡，同时保持 Flex 布局结构不变。
- 折叠态用
.sidebar { width: 60px; min-width: 60px; }，展开态用width: 240px，两者都设transition: width 0.3s ease - 主内容区不用加
margin-left，靠flex: 1自动响应剩余空间，避免手动同步 - 如果用了
overflow: hidden在父容器上，要确认它没裁掉侧边栏里position: absolute的下拉菜单或 Tooltip - 移动端建议加
@supports (backdrop-filter: blur(1px))控制折叠动画层级，防止 iOS Safari 渲染错位
align-items 和 justify-content 在后台布局里到底要不要？
绝大多数后台框架不需要它们——除非你在做顶部导航栏的垂直居中、或某个卡片内部的图标文字对齐。全局 .layout 容器设这两个属性反而容易干扰子区域的自然流。
-
justify-content对列式布局（flex-direction: column）无效，别乱加 -
align-items: stretch是默认值，会让所有子项拉满容器宽度，这正是你想要的；显式写出来反而可能被后续样式覆盖 - 真要用居中，只在局部模块（如登录框、空状态页）内设，且确保父容器有明确宽高
- 别在
.main上设align-items，它会导致内部表格、列表等内容横向错位
为什么 height: 100% 在后台布局里大概率失效？
因为 html 和 body 元素默认没有高度，height: 100% 会一路向上求值到 auto，最终算出来是 0。这不是 bug，是 CSS 高度继承规则本身决定的。
- 优先用
min-height: 100vh：兼容性好，且能应对 Safari 地址栏收起/弹出导致视口高度波动的问题 - Electron 或 WebView 环境下可加后备
min-height: -webkit-fill-available - 如果用了 iframe 嵌入，
vh会基于 iframe 高度而非顶层窗口，此时得用 JS 动态设style.height - 绝对不要依赖
height: 100%+html { height: 100% }组合，旧版 Safari 会渲染异常
Flex 布局生效与否，最终看的是父容器的 computed height 是否 > 0 —— 这个值看不见、摸不着，但决定了 flex: 1 能不能分到空间。调试时直接打开 DevTools 查元素 computed 样式里的 height，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
