Next.js布局中侧边栏展开/折叠时如何保持页面内容水平居中？

问题根源 #

你当前用calc(100vw - 侧边栏宽度)设置内容的max-width，但侧边栏过渡时，主容器的宽度是通过flex-1自动适配剩余空间，而vw是固定视口宽度，两者的变化节奏不同步，导致内容在过渡过程中偏离居中位置。

最佳实现方案 #

核心思路是让主内容直接在剩余可用空间内居中，不需要手动计算视口宽度。利用Flex布局的特性，让主容器自动占据侧边栏之外的空间，再在这个容器内部实现内容居中。

步骤1：修改共享布局组件 #

调整主容器的布局属性，使其成为Flex容器并负责居中逻辑，同时确保侧边栏的宽度变化带有平滑过渡：

function LayoutContent({
  children,
}: {
  children: (props: { isCollapsed: boolean }) => React.ReactNode;
}) {
  const { state } = useSidebar();
  const isCollapsed = state === "collapsed";

  return (
    <div className="flex h-screen">
      <Navbar />
      {/* 确保侧边栏自身带有宽度过渡 */}
      <AppSidebar className="transition-all duration-300" />
      {/* 主容器：自动占据剩余空间，内部水平居中 */}
      <div className="flex-1 flex flex-col items-start pt-24 md:pt-[100px] w-full transition-all duration-300">
        {/* 可选：限制内容最大宽度，避免过宽 */}
        <div className="w-full max-w-4xl mx-auto px-4">
          {children({ isCollapsed })}
        </div>
      </div>
    </div>
  );
}

步骤2：简化页面内容代码 #

不需要再根据折叠状态计算max-width，直接放入内容即可：

<SharedLayout>
  {({ isCollapsed }) => (
    <div>
      {/* 页面内容 */}
    </div>
  )}
</SharedLayout>

关键细节说明 #

• 侧边栏过渡：必须确保AppSidebar组件的宽度切换（16rem ↔ 4.5rem）带有transition-all duration-300类，这样宽度变化是平滑的，主容器的flex-1会同步平滑调整。
• 内容最大宽度：如果需要限制内容宽度，直接在主容器内部的子div设置max-w-*类（如max-w-4xl）或自定义百分比（如max-w-[80%]），这个宽度是基于剩余可用空间，而非视口。
• Flex布局优势：主容器的flex-1会自动填充侧边栏之外的所有空间，内部的mx-auto确保内容始终在该空间内水平居中，过渡过程中完全同步。

内容的提问来源于stack exchange，提问作者J_Max