Ant Design Layout 上中下布局详解构建经典 Header-Content-Footer 页面骨架【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design本篇基于 Ant Design 官方示例「上中下布局」components/layout/demo/top.md展开系统讲解这一最经典的「Header - Content - Footer」页面骨架的设计动机、可运行的完整实现代码并结合 Layout 源码与样式实现剖析其 flex 布局机制与 Design Token 默认值帮助读者快速搭建结构稳定的企业级页面布局并理解何时该选上中下布局、何时应切换到侧边布局。什么是「上中下」布局根据官方示例说明top.md这是最基本的『上-中-下』布局主导航位于页面顶端从左到右依次为 logo、一级导航项、辅助菜单用户、设置、通知等。内容区使用固定尺寸约束通常将内容放在固定宽度例如1200px内使整个页面排版稳定不受用户终端显示器尺寸影响。符合浏览习惯上下级的结构符合用户自上而下浏览的习惯是较为经典的网站导航模式。效率与代价的权衡页面上下切分的方式提高了主工作区域的信息展示效率但在纵向空间上会有一些牺牲。适用边界由于导航栏水平空间的限制这种模式不适合一级导航项很多的信息结构——导航项过多时水平空间无法容纳此时应考虑侧边布局或顶部-侧边组合布局。英文版文档同一文件中 en-US 部分的表述为The most basic header-content-footer layout. Top-bottom structure is conformed with the top-bottom viewing habit, its a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space.完整可运行的上中下布局示例Ant Design 仓库中的完整示例位于 top.tsx可直接复制到项目中使用import React from react; import { Breadcrumb, Layout, Menu, theme } from antd; const { Header, Content, Footer } Layout; const items Array.from({ length: 15 }).map((_, index) ({ key: index 1, label: nav ${index 1}, })); const App: React.FC () { const { token: { colorBgContainer, borderRadiusLG }, } theme.useToken(); const currentYear new Date().getFullYear(); return ( Layout Header style{{ display: flex, alignItems: center }} div classNamedemo-logo / Menu themedark modehorizontal defaultSelectedKeys{[2]} items{items} style{{ flex: 1, minWidth: 0 }} / /Header Content style{{ padding: 0 48px }} Breadcrumb style{{ margin: 16px 0 }} items{[{ title: Home }, { title: List }, { title: App }]} / div style{{ background: colorBgContainer, minHeight: 280, padding: 24, borderRadius: borderRadiusLG, }} Content /div /Content Footer style{{ textAlign: center }} Ant Design ©{currentYear} Created by Ant UED /Footer /Layout ); }; export default App;示例中的关键技术点三段式结构最外层Layout内依次放置Header、Content、Footer三个子组件正好对应『上-中-下』三个区域。官方 Layout 组件文档给出的标准嵌套形态为Layout Headerheader/Header Layout Siderleft sidebar/Sider Contentmain content/Content Siderright sidebar/Sider /Layout Footerfooter/Footer /LayoutHeader 内部的 flex 排布Header上直接设置display: flex, alignItems: centerlogo 占位元素固定Menu通过flex: 1, minWidth: 0吃掉剩余空间——minWidth: 0是 flex 子项的经典防溢出写法避免 15 个导航项撑破水平导航栏。深色水平菜单Menu使用themedarkmodehorizontal与Header的深色默认背景tokenheaderBg默认#001529搭配。源码中 Header 样式特意让内嵌的.ant-menu继承lineHeight见 style/index.ts 中lineHeight: unit(headerHeight)使菜单项与 Header 等高对齐这是「菜单融入顶栏」的官方集成细节。内容卡片使用全局 Token通过theme.useToken()取出colorBgContainer与borderRadiusLG使内容区的背景色、圆角随主题自动切换亮/暗模式而不是写死颜色值。面包屑 内容卡片Content内以Breadcrumb提供路径导航再放置一块minHeight: 280的内容容器模拟真实业务页面的主工作区。源码剖析Header / Content / Footer 是如何生成的阅读 layout.tsx 可以看到四个区域组件均由同一个generator工厂函数从BasicLayout派生const Layout generator({ tagName: div, displayName: Layout, })(BasicLayout); const Header generator({ suffixCls: header, tagName: header, displayName: Header, })(Basic); const Footer generator({ suffixCls: footer, tagName: footer, displayName: Footer, })(Basic); const Content generator({ suffixCls: content, tagName: main, displayName: Content, })(Basic);由此得到两点值得注意的实现事实语义化 HTMLLayout渲染为div而Header、Footer、Content分别渲染为header、footer、main语义标签天然对 SEO 和无障碍screen reader 的 landmark 识别友好。类名规则每个组件在Basic中通过getPrefixCls(layout)得到前缀再拼接suffixCls最终类名为ant-layout、ant-layout-header、ant-layout-footer、ant-layout-content。Basic组件还负责挂接hashId与cssVarCls即 CSS-in-JS 样式与 CSS 变量模式的接入点。hasSider为什么上中下布局是纵向 flexBasicLayout 的核心职责之一是通过useHasSider判断子元素中是否存在Sider// components/layout/hooks/useHasSider.ts export default function useHasSider( siders: string[], children?: React.ReactNode, hasSider?: boolean, ) { if (typeof hasSider boolean) { return hasSider; } if (siders.length) { return true; } const childNodes toArray(children); return childNodes.some((node) node.type Sider); }判断结果决定ant-layout-has-sider类名是否生效。对应到 样式层[componentCls]: { display: flex, flex: auto, flexDirection: column, // 默认纵向排列即上中下 minHeight: 0, background: bodyBg, , *: { boxSizing: border-box }, [${componentCls}-has-sider]: { flexDirection: row, // 含 Sider 时横向排列 [ ${componentCls}, ${componentCls}-content]: { width: 0 }, }, [${componentCls}-header, ${componentCls}-footer]: { flex: 0 0 auto, // 头、脚固定高度不伸缩 }, }对「上中下布局」而言因为子元素中没有SiderLayout 保持flex-direction: columnHeader 与 Footer 都是flex: 0 0 auto占位固定Content则是flex: autominHeight: 0见 style/index.ts——这就是中间内容区自动填满 Header 与 Footer 之间剩余空间、且可被压缩到小于内容高度的原理。minHeight: 0上的注释表明这是修复 Firefox 中 flex 项无法收缩至内容高度以下的兼容性问题。从源码结构看BasicLayout还通过 LayoutContext 向上层暴露addSider/removeSider钩子供嵌套的Sider动态注册自己——这也是「动态增删侧边栏时has-sider类名能实时更新」的机制来源。hasSider属性则如 Layout 文档 的 API 表所述「表示子元素里有 Sider一般不用指定。可用于服务端渲染时避免样式闪动」SSR 首帧无法感知运行时 children 时手动传入可避免布局方向闪动。上中下布局相关的 Design TokenprepareComponentToken 定义了 Layout 的组件级 Token 及其默认值直接决定示例的视觉观感Token说明默认值headerHeight顶部高度controlHeight * 2默认 64pxheaderBg顶部背景色#001529headerPadding顶部内边距0 ${controlHeightLG * 1.25}px默认0 50pxheaderColor顶部文字颜色colorTextfooterBg页脚背景色colorBgLayoutfooterPadding页脚内边距${controlHeightSM}px ${controlHeightLG * 1.25}pxbodyBg主体部分背景色colorBgLayout可以看到 Header 的默认高度64px与官方设计规范完全一致。同时源码中声明了废弃 Token 映射DEPRECATED_TOKENScolorBgHeader → headerBg、colorBgBody → bodyBg、colorBgTrigger → triggerBg即旧版colorBgHeader等命名已废弃新代码应直接使用上表中的 Token 名。设计规范高度与宽度的取值公式Layout 文档 的「设计规则」章节给出了页面级尺寸的量化标准可作为搭建上中下布局时的取值依据顶部导航大部分系统一级导航高度64px二级导航48px顶部导航展示类页面一级导航高度80px二级导航56px顶部导航高度的范围计算公式48 8n侧边导航宽度的范围计算公式200 8n。例如默认的headerHeight: 64px恰好是48 8×2。若需要在项目层面统一调整可以在ConfigProvider的theme.components.Layout中覆盖headerHeight、headerBg等 Token而一次性调整比如让 Header 与水平菜单等高也可以直接在Header上通过style覆盖如示例中display: flex, alignItems: center的做法。与相邻布局模式的选型对照官方在同一 demo 目录 下提供了完整布局族谱上中下布局只是其中一种示例说明basic.tsx基本结构Layout 嵌套 Sider Contenttop.tsx上中下布局本篇主题top-side.tsx顶部-侧边布局top-side-2.tsx顶部-侧边布局-通栏side.tsx侧边布局responsive.tsx响应式布局SiderbreakpointcollapsedWidthfixed.tsx固定头部fixed-sider.tsx固定侧边栏component-token.tsx组件 Token 覆盖结合原文档的结论选型原则可以归纳为一级导航项少如 5 个以内首选上中下布局Header 内放水平Menu一级导航项多、需要分组或层级改为 top-side.tsx 或 side.tsx把导航移到Sider中纵向展开——此时 Layout 自动切换为flex-direction: row需要小屏折叠侧栏在 responsive.tsx 基础上使用Sider的breakpoint/collapsedWidth/onBreakpoint属性。小结上中下布局是 Ant Design Layout 组件族中最简单的形态Headerheader与Footerfooter以flex: 0 0 auto固定上下Contentmain以flex: auto撑满中部整棵子树统一box-sizing: border-box并默认纵向 flex 排列。示例 top.tsx 展示了「深色水平菜单 面包屑 Token 驱动的内容卡片」这一完整套路而高度取值48 8n、背景色与内边距均由 style/index.ts 中的 Layout Token 统一管控可通过ConfigProvider在应用级覆盖。理解useHasSider驱动的ant-layout-has-sider切换机制后就能在同一套 Layout API 上平滑扩展出顶部-侧边、响应式等更复杂的页面骨架。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考