语义化命名优先用toolbar、dialog-body等反映布局意图的类名，避免纯样式类；间距用gap替代margin；flex-wrap按需启用；flex项目设min-width:0防溢出；用data-flex标记非弹性子项。
flex容器的class名别叫flex
叫flex等于没说——你不知道它干啥，也不知道它在哪用。语义化不是写user-card-flex这种冗余名，而是从布局意图出发：是做横向排列的工具栏？还是垂直居中的弹窗内容？
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
toolbar、dialog-body、card-grid这类反映组件功能的类名，再通过CSS把它们设为display: flex - 避免在HTML里塞一堆
flex-row、flex-center这种纯样式类——它们会污染结构，且无法表达“为什么这里要居中” - 如果真需要复用对齐逻辑，抽成
align-center这类工具类可以，但必须配合语义主类一起用，比如dialog-body align-center
flex项目别靠margin控制间距
用margin推子元素，会导致最后一项多出多余空白，响应式断点时更难收口；而且一旦换方向（比如flex-direction: column），所有margin-right就失效了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
gap——它天然忽略首尾，支持row-gap/column-gap独立控制，Flex和Grid都认 - IE不支持
gap？那就用justify-content: space-between或space-around替代均匀分布场景，别硬上margin - 若必须用
margin，记得加:not(:last-child)限定，比如.toolbar > *:not(:last-child) { margin-right: 12px; }
flex-wrap开不开，得看内容是否真的会溢出
很多人一上来就写flex-wrap: wrap，结果在宽屏下把本该横排的按钮硬折成两行，破坏操作流。反过来，该换行时不写，又导致水平滚动或内容被裁。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先按最小视口设计主轴尺寸，再用
min-width或flex-basis约束子项，让wrap成为“被动响应”，而不是默认开关 - 用
flex: 0 1 auto比flex: 1更可控——前者不放大、可收缩、按内容定宽，不容易撑爆容器 - 检查
white-space: nowrap有没有误加在子元素上，这会让文本拒绝换行，间接导致flex容器溢出
用data-属性标记flex行为边界
当一个flex容器里混着固定头、滚动区、折叠面板时，仅靠class很难一眼看出哪些子元素参与弹性分配，哪些只是占位或隔离层。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给不参与flex计算的子元素加
data-flex="ignore"，并在CSS里统一处理：[data-flex="ignore"] { flex: none; } - 对需要特殊排序的项，用
data-order="first"配合order属性，比硬写order: -1更易维护 - 别依赖
nth-child来选flex项目——DOM顺序可能变，而data-属性锚定的是语义意图
最常被忽略的其实是flex项目的min-width: 0。文字内容长时，它默认不收缩，会撑破容器；这个细节不加，光靠flex: 1根本压不住。
