Flex布局本身静态，JavaScript通过增删DOM节点触发重排实现动态效果；display:flex自动重新分配空间，无需手动设置flex-grow或重算宽度，关键在于数据、事件与状态的同步。
Flex 布局本身不“动态”，真正动态的是你用 JavaScript 增删 DOM 节点的过程；display: flex 只负责渲染当前存在的子元素，只要节点增删后触发重排，它就自动重新分配空间——不用手动调 flex-grow 或重算宽度。
为什么直接用 appendChild + display: flex 就够了
Flex 容器对子项数量无预设限制，也不依赖索引或 key。只要父容器设了 display: flex（或 inline-flex），新增的 <div>、<code><span></span> 等块级/内联元素会立刻参与 flex 排列。
- 不需要给每个子项写
flex: 1才能均分——可以用flex: 1控制弹性，也可以用width+flex-shrink: 0锁定固定宽 - 删除节点后，剩余子项自动重流，无需 JS 干预样式
- 避免在 JS 中硬编码
style.flexGrow = "1"，那会覆盖 CSS 规则，且难维护 - 注意：如果子项是
<input>或<button></button>，默认flex-shrink: 1，可能被压缩变形，加flex-shrink: 0更稳
flex-wrap: wrap 下新增项溢出时的常见错觉
很多人以为“加了新项没换行”是 flex 没生效，其实是容器宽度不够或子项最小宽度（min-width）卡死了。浏览器不会主动缩小子项到 0 来腾空间。
- 检查是否误设了
white-space: nowrap在子项上，导致文本撑宽 - 子项含图片时，默认
min-width: auto，加min-width: 0才允许压缩 - 用
flex-basis替代width更符合 flex 语义，例如flex: 0 1 200px - 调试技巧：临时加
outline: 1px solid red到容器和子项，看实际占位
删除 flex 子项时最容易漏掉的三件事
DOM 删除只是第一步，漏掉下面任意一项都可能引发 UI 卡顿、事件残留或表单数据丢失。
立即学习“前端免费学习笔记（深入）”；
- 没清理绑定在该节点上的事件监听器（尤其是用
addEventListener且没存引用时），会导致内存泄漏 - 子项里有
<input type="file">，直接remove()不会清空已选文件，下次新增同名 input 仍带旧值，应先input.value = "" - 如果用了
data-id或其他属性关联外部数据数组，删除 DOM 后忘了splice()对应索引，后续新增会错位 - 别用
innerHTML = ""清空整个容器——会批量销毁所有子项事件，且无法做逐项清理逻辑
真正要操心的从来不是 flex 怎么“动”，而是节点增删时数据、事件、状态三者是否同步；CSS 只管呈现，JS 才管因果。
