UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载ng-zorro-antd 的 Flex 组件nz-flex是一个用于对齐的弹性布局容器指令自 17.1.0 版本引入专为设置元素间距与水平、垂直对齐而设计。本文以官方 Demo 中的基本布局Basic示例为主线完整讲解nz-flex的核心用法、全部输入属性的取值与默认值并结合仓库源码揭示其内部实现原理读完即可在 Angular 项目中直接上手使用。基本布局一行代码开启弹性布局Flex 组件对应的 Demo 文件位于 components/flex/demo/basic.md说明文案为“最简单的用法”其配套实现为 components/flex/demo/basic.ts。基本用法非常直观在任意 DOM 元素上添加nz-flex指令该元素就会成为一个 flex 容器其子元素自动按 flex 规则排列。下面是官方 Basic Demo 的完整代码它通过一个单选组在“水平 / 垂直”两种方向间切换直观展示nzVertical的作用import { Component, signal } from angular/core; import { FormsModule } from angular/forms; import { NzFlexModule } from ng-zorro-antd/flex; import { NzRadioModule } from ng-zorro-antd/radio; Component({ selector: nz-demo-flex-basic, imports: [FormsModule, NzFlexModule, NzRadioModule], template: nz-radio-group [(ngModel)]vertical label nz-radio [nzValue]falsehorizontal/label label nz-radio [nzValue]truevertical/label /nz-radio-group div nz-flex [nzVertical]vertical() div classflex-item/div div classflex-item even/div div classflex-item/div div classflex-item even/div /div , styles: nz-radio-group { margin-block-end: 1rem; } .flex-item { inline-size: 25%; block-size: 54px; background-color: var(--ant-primary-6); } .even { background-color: var(--ant-primary-5); } }) export class NzDemoFlexBasicComponent { readonly vertical signal(false); }从代码中可以看出几个要点使用方式为属性型指令nz-flex直接挂载在div上即可生效方向切换通过[nzVertical]绑定实现Demo 使用 Angular 的signalsignal(false)维护状态并通过nz-radio-group双向绑定切换子元素无需任何额外包装或标记原生块级元素直接成为 flex item官方 Demo 的样式大量使用 CSS 逻辑属性inline-size、block-size与设计令牌变量var(--ant-primary-6)这也是 ng-zorro-antd 组件示例的通用风格。nz-flex 指令的核心实现nz-flex本质上是 components/flex/nz-flex.directive.ts 中定义的一个 Angular 指令其选择器为[nz-flex],nz-flex既可作为属性指令使用也可作为元素nz-flex使用并导出别名nzFlexDirective({ selector: [nz-flex],nz-flex, exportAs: nzFlex, host: { class: ant-flex, [class.ant-flex-vertical]: nzVertical, // 各 justify / align / wrap 取值对应不同的 class…… [style.gap]: gap, [style.flex]: nzFlex } }) export class NzFlexDirective { Input({ transform: booleanAttribute }) nzVertical: boolean false; Input() nzJustify: NzJustify normal; Input() nzAlign: NzAlign normal; Input() nzGap: NzGap 0; Input() nzWrap: NzWrap nowrap; Input() nzFlex: NzFlex unset; }从源码结构看该指令的核心设计是**“输入属性驱动 CSS class / 内联样式”**容器固定挂载ant-flexclass基础样式.ant-flex { display: flex; }定义于 components/flex/style/index.lessnzVertical、nzJustify、nzAlign、nzWrap四个属性分别通过 host 绑定切换形如ant-flex-vertical、ant-flex-justify-*、ant-flex-align-*、ant-flex-wrap-*的 classnzGap与nzFlex则直接映射为内联样式gap与flex。值得注意的是nzVertical使用了 Angular 的booleanAttribute变换因此模板中可以直接写div nz-flex nzVertical而不需要显式绑定true。API 参数全解Flex 组件官方文档位于 components/flex/doc/index.zh-CN.md其[nz-flex]API 表格如下默认值与仓库源码一致参数说明类型默认值[nzVertical]使用flex-direction: column描述 flex 的垂直方向booleanfalse[nzJustify]设置元素在主轴方向上的对齐方式参照 CSSjustify-contentNzJustifynormal[nzAlign]设置元素在交叉轴方向上的对齐方式参照 CSSalign-itemsNzAlignnormal[nzGap]设置项目的间隙small \| middle \| large \| number \| string0[nzWrap]指定 flex 元素单行显示还是多行显示参照 CSSflex-wrapNzWrapnowrap[nzFlex]flex CSS 简写属性参照 CSSflexNzFlexunset各参数的具体取值由 components/flex/typings.ts 中的类型联合定义约束export type NzJustify | flex-start | center | flex-end | space-between | space-around | space-evenly | start | end | right | left | stretch | normal; export type NzAlign | flex-start | center | flex-end | space-between | space-around | space-evenly | start | end | right | left | stretch | normal; export type NzGap small | middle | large | NzCustomGap; export type NzCustomGap number | string; export type NzWrap wrap | nowrap | wrap-reverse; export type NzFlex ${NzFlexShrink} ${NzFlexGrow} ${NzFlexBasis} | unset;几个容易被忽略的细节nzGap的值解析指令内部通过gapgetter 处理small、middle、large分别映射为8px、16px、24px数字类型会拼接为${value}px字符串类型则原样透传。因此[nzGap]80等效于gap: 80px也可以直接传任意 CSS gap 字符串nzFlex的类型约束被建模为数字 数字 字符串的三段式模板shrink、grow、basis也可取unset对齐取值的完备性NzJustify/NzAlign覆盖了 CSS 标准中的全部常用取值包括较新的start、end、stretch等。与 Space 组件的区别官方文档专门说明了 Flex 与 Space 两个布局组件的定位差异Space为内联元素提供间距其本身会为每一个子元素添加包裹元素用于内联对齐适用于行、列中多个子元素的等距排列Flex为块级元素提供间距其本身不会添加任何包裹元素适用于垂直或水平方向上的子元素布局提供更多的灵活性和控制能力。一句话概括需要等距排列且不在意包裹层时用 Space需要完全掌控布局能力时用 Flex。从样式表看底层渲染机制components/flex/style/index.less 是 Flex 组件样式的唯一来源其核心结构如下.{flex-prefix-cls} { display: flex; -vertical { flex-direction: column; } -justify { -flex-start { justify-content: flex-start; } -center { justify-content: center; } // ……其余 justify 取值 } -align { -flex-start { align-items: flex-start; } -center { align-items: center; } // ……其余 align 取值 } -wrap { -wrap { flex-wrap: wrap; } -nowrap { flex-wrap: nowrap; } -wrap-reverse { flex-wrap: wrap-reverse; } } }也就是说指令层只负责把输入属性翻译成 class 名真正的布局行为全部由 CSS 完成。这种“属性 → class → CSS 属性”的映射模式使 Flex 组件与 Ant Design 的样式体系保持完全一致并天然支持主题变量与样式定制。对照 components/flex/flex.spec.ts 中的测试用例可以看到这种映射被逐一验证例如测试遍历NzJustify的全部取值断言元素 class 中包含对应值nzVertical切换时断言 class 中是否出现vertical。测试还覆盖了gap与flex内联样式的生成逻辑文件后半部分可以作为理解指令行为的参考。快速上手安装与引入Flex 属于 ng-zorro-antd 内置组件无需单独安装额外依赖。在模块NgModule体系下引入NzFlexModule定义于 components/flex/flex.module.ts仅导入并导出NzFlexDirectiveimport { NzFlexModule } from ng-zorro-antd/flex; NgModule({ imports: [NzFlexModule] }) export class AppModule {}若使用 Angular 17 的独立组件standalone写法直接在组件的imports数组中引入NzFlexModule即可Basic Demo 正是这种写法。基础模板示例!-- 水平排列默认 -- div nz-flex divItem 1/div divItem 2/div divItem 3/div /div !-- 垂直排列 -- div nz-flex nzVertical divItem 1/div divItem 2/div /div !-- 主轴居中 间隙 -- div nz-flex nzJustifycenter nzAligncenter nzGapmiddle divItem 1/div divItem 2/div /div !-- 自定义数值间隙 -- div nz-flex [nzGap]80……/div进阶场景速览除基本布局外仓库中还有四个官方 Demo 覆盖了 Flex 的常见进阶用法可组合阅读路径均在 components/flex/demo/ 下align.ts通过nz-segmented分段器动态切换nzJustifyflex-start / center / flex-end / space-between / space-around / space-evenly与nzAlignflex-start / center / flex-end演示主轴与交叉轴对齐效果gap.ts演示nzGap的small/middle/large预设与custom自定义模式配合nz-slider滑块动态调整数值wrap.ts演示nzWrap的wrap/wrap-reverse/nowrap三种换行策略对子元素排列的影响combination.ts通过嵌套nz-flex外层水平、内层垂直并叠加nzGaplarge实现复杂布局这也是官方推荐的多层布局组合方式。这些 Demo 共同说明一个结论Flex 组件虽只有一个指令却通过六个语义清晰的输入属性覆盖了display: flex在间距、对齐、换行、方向上的全部核心能力足以应对绝大多数页面级布局需求。小结nz-flex是 ng-zorro-antd 提供的弹性布局容器指令使用成本极低挂上指令即生效不产生任何包裹元素六个输入属性nzVertical、nzJustify、nzAlign、nzGap、nzWrap、nzFlex与 CSS 布局属性一一对应默认值与源码定义可在 components/flex/nz-flex.directive.ts 中直接核对实现上采用“输入属性 → host class / 内联样式”的映射策略样式集中在 components/flex/style/index.less行为由 components/flex/flex.spec.ts 中的测试用例保障与 Space 组件互补Flex 面向块级布局且不添加包裹元素Space 面向内联元素等距排列。从“最简单的用法”出发你已经掌握了 Flex 组件的完整使用面可以立即在业务项目中用它替换手写的 flex 工具类或内联样式。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐OpenMetadata RDF 状态显示 DEGRADED 怎么排查OpenMetadata RDF 状态显示 DEGRADED 怎么排查 在 OpenMetadata 中启用 RDF 知识图谱后端为 Apache JenaUI组件前端Pydantic AI 迁移验证与安全切换从 LangChain/LangGraph 平滑落地的完整核查指南Pydantic AI 迁移验证与安全切换从 LangChain/LangGraph 平滑落地的完整核查指南 本篇技术指南聚焦于将 LangChain/LanUI组件前端ng-zorro-antd Descriptions 响应式布局nzColumn 断点配置与源码解析ng zorro antd Descriptions 响应式布局nzColumn 断点配置与源码解析 ng zorro antd 的 DescriptionsUI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考