Flex布局本身静态，JavaScript通过增删DOM节点触发重排实现动态效果；display:flex自动重新分配空间，无需手动设置flex-grow或重算宽度，关键在于数据、事件与状态的同步。

Flex 布局本身不“动态”，真正动态的是你用 JavaScript 增删 DOM 节点的过程；display: flex 只负责渲染当前存在的子元素，只要节点增删后触发重排，它就自动重新分配空间——不用手动调 flex-grow 或重算宽度。

为什么直接用 appendChild + display: flex 就够了

Flex 容器对子项数量无预设限制，也不依赖索引或 key。只要父容器设了 display: flex（或 inline-flex），新增的

、 等块级/内联元素会立刻参与 flex 排列。

• 不需要给每个子项写 flex: 1 才能均分——可以用 flex: 1 控制弹性，也可以用 width + flex-shrink: 0 锁定固定宽
• 删除节点后，剩余子项自动重流，无需 JS 干预样式
• 避免在 JS 中硬编码 style.flexGrow = "1"，那会覆盖 CSS 规则，且难维护
• 注意：如果子项是 或 ，默认 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 卡顿、事件残留或表单数据丢失。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 没清理绑定在该节点上的事件监听器（尤其是用 addEventListener 且没存引用时），会导致内存泄漏
• 子项里有 ，直接 remove() 不会清空已选文件，下次新增同名 input 仍带旧值，应先 input.value = ""
• 如果用了 data-id 或其他属性关联外部数据数组，删除 DOM 后忘了 splice() 对应索引，后续新增会错位
• 别用 innerHTML = "" 清空整个容器——会批量销毁所有子项事件，且无法做逐项清理逻辑

真正要操心的从来不是 flex 怎么“动”，而是节点增删时数据、事件、状态三者是否同步；CSS 只管呈现，JS 才管因果。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！