h5移动端flex标准强调“可控、可读、可维护”：一、容器须显式声明flex-direction和flex-wrap；二、flex:1需配min-height:0或overflow:hidden；三、禁用float/clear/vertical-align，统一用flex对齐；四、响应式优先用flex-basis+flex-shrink。
团队在 H5 移动端项目中统一 Flex 编写标准，核心是“可控、可读、可维护”，不是追求语法炫技，而是让布局行为稳定、跨设备一致、新人能快速上手。重点不在“怎么写 flex”，而在于“什么时候用、怎么约束、怎么兜底”。
一、容器必须显式定义主轴与换行行为
禁止只写 display: flex 就结束。未声明 flex-direction 和 flex-wrap 容易在不同机型或未来改版中引发意外排列（比如横屏时内容错位、长列表突然横向溢出）。
- 默认垂直流式场景（如页面上下结构）：用
flex-direction: column - 默认水平排列组件（如按钮组、标签栏）：用
flex-direction: row - 所有可能内容超宽的容器，必须明确写
flex-wrap: wrap或nowrap，不依赖默认值 - 推荐使用复合属性
flex-flow一次性声明，例如：flex-flow: row wrap
二、flex:1 必须搭配 min-height: 0 或 overflow: hidden
这是移动端最常踩的坑。单独写 flex: 1（即 flex-grow: 1; flex-shrink: 1; flex-basis: 0%）会导致内容撑开容器、底部被顶出视口，尤其在安卓 WebView 和 Safari 中高发。
- 正确写法：
.main { flex: 1; min-height: 0; } - 若需隐藏溢出（如卡片内文本截断），可加
overflow: hidden，它同时触发 BFC，进一步隔离布局影响 - 禁止在 flex 项目上设置
height: 100%替代flex: 1，这在嵌套 flex 中极易失效
三、禁用 float / clear / vertical-align，统一用 Flex 对齐
一旦父容器设为 display: flex，子元素的 float、clear、vertical-align 全部失效，但团队成员可能因习惯保留这些旧写法，造成样式冗余甚至冲突。
- 水平居中统一用
justify-content: center（容器级）或margin: 0 auto（单个项目） - 垂直居中统一用
align-items: center（单行）或align-self: center（单个项目） - 删除所有已知无作用的
float: left、vertical-align: middle等声明 - CI 流程中可加入 stylelint 规则自动拦截
四、响应式适配优先用 flex-basis + flex-shrink，少用 media query 覆盖
对卡片、列表项等重复结构，应优先利用 Flex 的弹性能力做自适应，而非为每种屏幕宽度写一堆 media query。
- 推荐写法：
flex: 1 1 calc(50% - 12px)（双列，含间隙）或flex: 0 1 300px（最小 300px，可缩小） - 避免：
width: 50%; @media (max-width: 768px) { width: 100%; } - 复杂断点仍需 media query，但仅用于大块布局切换（如 header 导航从横排变竖排），不用于微调间距或字体
规范落地的关键不是文档多厚，而是把这几条塞进 ESLint/Stylelint 配置、代码模板和 CR checklist 里。写一次，查十次，自然就成肌肉记忆了。
