移动端弹性布局需精准控制flex-direction、flex属性及对齐方式：横向滑动用row+overflow-x:auto，竖向内容用column嵌套row；flex:1均分空间，flex:0 0 auto按内容占位；justify-content与align-items作用随主轴方向变化；scroll-snap需配合明确宽度和flex:0 0 100%实现吸附。
移动端弹性布局不是加个 display: flex 就能“自动适配”，关键在方向控制、空间分配逻辑和 WebView 兼容细节。很多卡顿、溢出、错位问题，都出在没理清 flex-basis 和 flex-wrap 的实际作用。
flex-direction 选错导致整个布局翻车
移动端常见需求是竖向滚动 + 横向滑动卡片组，但很多人把外层容器也设成 column，结果子项被强制堆叠、无法横向排列。
- 横向滑动区域（如轮播、标签栏）：父容器必须用
flex-direction: row，且通常搭配overflow-x: auto和white-space: nowrap - 竖向内容流（如新闻列表、商品瀑布）：外层用
flex-direction: column，内部卡片组再嵌套一层row容器 - 别依赖默认值——Android 旧版 WebView 有时会忽略未显式声明的
flex-direction，始终写明
flex: 1 和 flex: 0 0 auto 在移动端表现差异极大
等宽卡片、导航栏均分、按钮自适应宽度，这些场景下用错 flex 简写，轻则错位，重则整行换行或文字撑破容器。
-
flex: 1→flex-grow: 1; flex-shrink: 1; flex-basis: 0%：从零开始均分剩余空间，适合纯等分（如三图标导航） -
flex: 0 0 auto→ 不放大不缩小，按内容宽度占位：适合图标+文字按钮，避免文字多的项把其他项挤窄 - 用
width: 33.33%替代flex: 1？危险！某些 Android 4.4 WebView 在flex-wrap: wrap下对百分比宽度重排极慢，导致滚动卡顿
align-items / justify-content 混用引发居中失效
移动端最常写的“垂直居中”失败，90% 是因为没确认主轴方向——justify-content 管的是主轴，align-items 管的是交叉轴，而主轴由 flex-direction 决定。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 横向布局（
flex-direction: row）：justify-content: center控制水平居中，align-items: center控制垂直居中 - 纵向布局（
flex-direction: column）：两者作用互换，justify-content: center变成垂直居中，align-items: center才是水平居中 - 单个子项需单独居中？别改父容器，用
align-self: center，它优先级高于align-items
scroll-snap 配合 flex 实现吸附式横向滚动
原生横向滚动体验差，用户一划就滑过头。用 scroll-snap-type + scroll-snap-align 能实现 iOS 风格的卡片吸附，但必须配合 flex 正确设置尺寸约束。
- 容器需设
scroll-snap-type: x mandatory，且必须有明确宽度（如width: 100vw），不能靠flex: 1撑开 - 每个子项要设
scroll-snap-align: start，同时确保flex: 0 0 100%或固定宽（如width: 320px），否则吸附点错位 - 旧版 iOS Safari（scroll-snap，需降级为
touchstart/move/end手动计算位移，此时慎用flex-wrap，避免重排抖动
真正难的不是写对属性，而是理解 flex 项目如何“协商”空间：它不看 width，只看 flex-basis；它不自动换行，除非你开 flex-wrap；它在旧 WebView 里对百分比和 auto 的处理，和桌面 Chrome 完全不是一回事。动手前，先查目标机型的 WebView 版本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
