用 display: flex 配合 flex-direction 和媒体查询可实现 iOS 分栏响应式：横屏 row、竖屏 column；左侧固定宽 flex: 0 0 280px，右侧 flex: 1；用 gap 控制间距更安全；折叠时通过类名切换 flex-basis 并加 transition。
直接用 display: flex 搭配 flex-direction: row 和媒体查询就能还原 iOS 分栏控制器（Split View Controller）的典型行为：桌面/平板横屏下左右分栏，竖屏或小屏时自动切为上下堆叠。关键不在“模拟 iOS”，而在控制断点、尺寸分配和折叠逻辑。
如何让左右分栏在小屏自动变为上下堆叠
iOS 分栏控制器最核心的响应式行为就是横屏双栏、竖屏单栏。这靠 @media 切换 flex-direction 最直接：
- 默认设
.split-container { display: flex; flex-direction: row; } - 在
max-width: 768px或orientation: portrait下改用flex-direction: column - 注意：不要只依赖宽度断点，
@media (orientation: portrait)能更准确捕获 iPad 竖屏场景 - 避免给子项写死
height，否则column模式下容易撑出滚动条
左侧导航栏固定宽度 + 右侧主内容自适应
iOS 分栏中左侧常为固定宽度的导航（如邮件列表），右侧为主内容区（邮件详情）。Flex 的 flex 缩写能精准控制：
- 左侧栏：用
flex: 0 0 280px（不伸缩、不收缩、基础宽 280px） - 右侧栏：用
flex: 1（占满剩余空间），等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0% - 别用
width: 280px配flex: 1—— width 会干扰 flex 计算，导致右侧被压缩 - 若右侧内容文字过长溢出，加
min-width: 0防止 flex 默认的最小尺寸保护机制失效
为什么 gap 比 margin 更安全
iOS 分栏间通常有清晰间距，但用 margin 在 flex 容器里容易引发对齐错乱或双倍间隙：
-
gap是 flex（和 grid）原生属性，只作用于项目之间，不触发外边距合并 - 例如
.split-container { gap: 16px; }会在左右栏之间加 16px，且在column模式下自动转为垂直间距 - 旧版 Safari（iOS 15.4 以下）不支持
gap，可用row-gap/column-gap回退，或临时用padding模拟 - 千万别在子项上同时写
margin-right和gap，间隙会叠加
折叠侧边栏时保持主内容完整显示
iOS 分栏支持手势拖动隐藏左侧栏，此时右侧内容应无缝扩展。纯 CSS 实现需配合类名切换：
- 初始状态：左侧栏
flex: 0 0 280px，右侧flex: 1 - 折叠后：给容器加
.collapsed类，左侧设flex: 0 0 0+overflow: hidden+width: 0 - 右侧保持
flex: 1，会自动占满全宽 —— 不需要 JS 修改宽度值 - 动画要加
transition: flex 0.3s ease，但注意flex是复合属性，部分浏览器动画支持不稳定，可拆成flex-basis单独过渡
真正难的不是写出两栏，而是让它们在 iPad 多任务、分屏、旋转、字体放大等场景下都不错位 —— 这要求所有尺寸尽量用相对单位（rem、%）、禁用 float 和 vertical-align，并始终检查 min-width: 0 和 overflow-wrap 对文本的影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
