本文介绍如何通过 jQuery UI 的 resizable 方法，正确实现左右两侧边栏的独立、稳定缩放，重点解决右侧面板因 position: relative 与 Flex 布局冲突导致的偏移错位问题。

本文介绍如何通过 jquery ui 的 `resizable` 方法，正确实现左右两侧边栏的独立、稳定缩放，重点解决右侧面板因 `position: relative` 与 flex 布局冲突导致的偏移错位问题。

在基于 Flex 布局的三栏结构中（左栏 + 主内容 + 右栏），直接为 .right-sidebar 设置 handles: "w"（向左拖拽）时，jQuery UI 默认会修改其 left CSS 属性值，导致元素脱离 Flex 流，产生意外位移或尺寸抖动——而左侧栏因 handles: "e"（向右拖拽）恰好与 Flex 的自然伸缩方向一致，故表现正常。

根本原因在于：Flex 容器中的子元素默认不响应 left/right 等定位属性；当 jQuery UI 在 resize 过程中动态写入 ui.position.left，会强制覆盖 Flex 的布局逻辑，破坏容器内联样式一致性。

✅ 正确解法是：在右侧面板的 resize 回调中，重置 ui.position.left = 0，阻止 jQuery UI 自动注入无效定位值，使其完全交由 Flex 布局控制宽度变化：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

$(function() {
  $(".left-sidebar").resizable({
    handles: "e",
    minWidth: 100,
    maxWidth: 500
  });

  $(".right-sidebar").resizable({
    handles: "w",
    minWidth: 100,
    maxWidth: 500,
    // 关键修复：阻止 left 值干扰 Flex 布局
    resize: function(event, ui) {
      ui.position.left = 0;
    }
  });
});

同时，确保 CSS 结构保持语义清晰与兼容性：

• .container 使用 display: flex，高度设为 100%；
• 左右栏设置固定初始宽度（如 width: 300px），但不依赖 position: relative 控制布局（该声明可保留用于内部绝对定位子元素，但对 Flex 子项无布局影响）；
• 主内容区使用 flex: 1 自适应剩余空间。

⚠️ 注意事项：

• 不要为 .right-sidebar 添加 float、absolute 或 margin-left/right 等破坏 Flex 流的样式；
• 若需支持移动端或更复杂嵌套，建议优先考虑原生 CSS resize + overflow: auto 或现代方案如 Split.js（轻量、无依赖、响应式友好）；
• jQuery UI 版本需 ≥ 1.12，且务必引入对应 CSS 主题文件以保证手柄渲染正常。

该方案零侵入、低耦合，仅需一行回调代码即可使左右侧边栏行为完全对称，兼顾开发效率与运行稳定性。