左侧栏布局
Sidebar
初级通用左侧栏布局（Sidebar）把导航或工具区放在页面左侧，把主要内容放在右侧。它让用户在多个页面或工作区之间切换时，始终能找到入口，例如后台的功能目录和数据页面。
你可能会说：「我想让功能入口一直排在左边，点不同入口时，右边显示对应内容。」
动手看看运营后台的侧栏
功能导航
数据概览
订单管理
客户管理
工作区
今日数据
本周订单 128
待处理工单 6
左边放功能入口，右边放正在查看的内容。侧栏保持设定宽度，工作区接过剩余空间；拖动两个宽度，看看它们怎么分配位置。
页面变宽后，侧栏重新出现。它不会跟着工作区一起伸长，因为 flex-shrink 设为 0，宽度由侧栏宽度参数决定。
要点左侧栏布局由哪几部分组成？
- 1
左边放跨页面的入口
左侧栏通常放用户会反复用到的导航，比如项目、文件或后台功能。因为这些入口不会随右侧内容频繁变化，用户切换任务时就不用每次重新找路。
- 2
右边留给当前任务
右侧是主要内容区，可以显示列表、详情或编辑器。我们判断布局是否合适时，先看用户的大部分注意力是否该留在这里；左侧栏是帮他到达任务，不是抢占任务空间。
- 3
窄屏时重新安排侧栏
手机屏幕通常放不下完整侧栏和主要内容。你可以让导航收起，并通过菜单入口打开；这样右侧内容仍有足够空间。和 AI Agent 协作时，记得说清桌面端与窄屏端分别怎么显示。
容易混淆的地方
左侧栏布局说的是整个页面如何分配空间；导航菜单说的是入口本身，可以放在左侧栏里，也可以放在别处。抽屉则是临时打开的面板，关闭后把空间还给内容。如果导航需要长期可见、用户还要频繁切换区域，我们通常讨论左侧栏布局，而不只是加一个抽屉。
什么时候用
适合用
- 做项目管理后台时，用户要在任务、成员、设置之间来回切换，右侧还要保留足够的操作空间。
- 做 AI 工具工作台时，用户需要随时切换会话或项目，并在右侧继续阅读和编辑当前内容。
- 做文档管理应用时，左边展示工作区和文件入口，右边显示正在阅读或编辑的文档。
不适合用
- 做只有一条阅读路径的产品介绍页时，左侧常驻导航占空间；用单页滚动布局更贴合浏览方式。
- 做选项很少的手机应用时，常驻左侧栏会挤压内容；可以考虑顶部导航或按任务组织的页面入口。
- 做两个需要同时对照的内容区时，比如原文与译文，重点不是导航；分屏布局更合适。
练一练选一个答案，看看解释
你要做一个桌面端项目后台，用户经常在「任务」「成员」「设置」之间切换，同时查看或编辑右侧内容。你会怎样向 AI Agent 描述布局？
让 AI 帮你做复制给 AI Agent 直接用
请把这个桌面端项目后台做成左侧栏布局：左侧放任务、成员、设置三个导航入口，并标明当前所在项；右侧显示对应页面内容。窄屏时收起侧栏，提供可打开导航的菜单入口。