flex容器新增子元素后不换行，因默认flex-wrap: nowrap；需设flex-wrap: wrap实现自动换行，并注意flex-basis、min-width等对动态布局的影响。
flex容器里新增子元素后不换行？检查flex-wrap是否为nowrap
Flex 默认是 flex-wrap: nowrap，意味着所有子项会强行挤在一行，即使内容超出容器宽度。动态添加新子项时，如果没显式设置换行，就会出现溢出或隐藏——不是布局“不自适应”，而是你没告诉它“可以折行”。
- 用
flex-wrap: wrap允许子项自动换行，这是实现“动态添加后仍排版合理”的基础 - 若需控制换行方向（比如从右往左加），配合
flex-direction: row-reverse，但注意这会影响justify-content的逻辑起点 - 某些 UI 框架（如 Ant Design 的
Space）默认禁用换行，得手动覆盖其flex-wrap
子项宽度忽大忽小？别只靠flex: 1，要理解三个参数的分工
flex 是 flex-grow、flex-shrink、flex-basis 的简写，动态添加子项时，三者共同决定每个子项如何争抢空间。只写 flex: 1 相当于 flex: 1 1 0，而 flex-basis: 0 会让浏览器忽略子项自身宽度，全凭比例分配——这在文字长度差异大时反而导致视觉失衡。
- 想让子项按内容自然撑开，用
flex: 0 1 auto（不放大、可缩小、以内容宽为基准） - 想等分固定数量子项，用
flex: 1 1 0+ 统一min-width防止过窄 - 动态添加时若某子项含长文本且未设
min-width，可能被压缩到文字换行甚至溢出，加min-width: max-content或具体值更可控
JavaScript 动态插入后布局错乱？别忘了触发重排前的样式准备
直接用 appendChild() 或 innerHTML += 插入新节点，如果新节点没有预设尺寸或 flex 相关样式，浏览器可能先按默认块级行为渲染，再重排——尤其在快速连续插入时，容易看到“闪动”或临时错位。
- 新元素创建后，立即设置
style.display = 'flex'（如果它是 flex 容器）或确保它有class包含flex相关规则 - 避免用
innerHTML +=批量插入：它会重建整个 DOM 片段，触发多次重排；改用DocumentFragment或append()批量添加 - 若插入后需要立即读取尺寸（比如做动画），用
getComputedStyle()或offsetWidth前，先调用clientHeight强制触发同步重排
移动端 Safari 下 flex 自适应失效？留意min-width和max-width的兼容性陷阱
iOS 15.4 之前，Safari 对 min-width: max-content 支持不完整，且某些 flex 行为在视口缩放后会卡住不重算。这不是代码写错了，是渲染引擎对动态尺寸响应滞后。
- 避免在关键子项上用
min-width: max-content，改用具体值（如min-width: 80px）或min-width: fit-content（iOS 16.4+ 更稳） - 动态添加后若发现子项宽度没更新，尝试给容器加
transform: translateZ(0)触发硬件加速重绘 - 不要依赖
flex-basis: auto在不同设备上表现一致——安卓 Chrome 和 Safari 对它的解析逻辑略有差异，显式设flex-basis: 0或具体值更可靠
flex 的“自适应”不是全自动的魔法，它依赖你明确告诉浏览器：哪些能伸、哪些能缩、边界在哪、换不换行。动态场景下，最容易被忽略的是 flex-wrap 的默认值和 flex-basis 的隐式行为——这两处一错，后面怎么调都像在修bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
