前端UI组件设计系统【免费下载链接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 项目地址https://gitcode.com/gh_mirrors/an/ant-design-vue点击查看免费下载导读Flex 是 ant-design-vue 自4.0.7版本起提供的弹性布局组件它基于 CSS Flexbox 封装用于快速设置块级子元素之间的间距以及水平、垂直方向上的对齐方式。读完本篇你将掌握 Flex 组件的全部 API 用法、与 Space 组件的选型区别、预设间距与自定义间距的底层实现以及如何通过嵌套组合出复杂的企业级布局。何时使用 Flex根据官方文档components/flex/index.zh-CN.mdFlex 组件适合两类典型场景设置元素之间的间距通过gap属性在主轴与交叉轴方向统一控制子元素间隙无需为每个子元素手动添加 margin设置各种水平、垂直对齐方式通过justify主轴对齐与align交叉轴对齐快速完成分布与对齐布局。这两个场景覆盖了日常页面开发中最高频的布局诉求工具条按钮排列、表单行内元素对齐、卡片内容分布、页面顶部导航等。与 Space 组件的区别很多开发者会混淆 Flex 与 Space 两个组件二者的定位存在本质差异对比维度SpaceFlex适用元素内联inline元素块级block元素包裹节点会为每一个子元素添加包裹元素用于内联对齐本身不会添加任何包裹元素典型场景行、列中多个子元素的等距排列垂直或水平方向上的子元素布局灵活度较低偏向等距间距更高提供对齐、换行、伸缩等完整控制能力简单来说Space 适合一排等距摆放Flex 适合需要精细控制对齐与换行的块级布局。官方文档的原文表述为Flex 为块级元素提供间距其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局并提供了更多的灵活性和控制能力。API 一览版本说明Flex 组件自ant-design-vue4.0.7版本开始提供。Flex 组件默认行为在水平模式下为向上对齐flex-start在垂直模式下为拉伸对齐stretch你可以通过属性进行调整。完整属性表如下与官方文档一致属性说明类型默认值verticalflex 主轴的方向是否垂直使用flex-direction: columnbooleanfalsewrap设置元素单行显示还是多行显示参考 flex-wrapnowrapjustify设置元素在主轴方向上的对齐方式参考 justify-contentnormalalign设置元素在交叉轴方向上的对齐方式参考 align-itemsnormalflexflex CSS 简写属性参考 flexnormalgap设置网格之间的间隙small|middle|large| string | number-component自定义元素类型Componentdiv属性详解与源码级实现下面逐一深入每个属性的用法并结合仓库源码components/flex/interface.ts、components/flex/index.tsx说明其底层原理。vertical主轴方向vertical接受 boolean 类型默认false。当设置为true时组件会生成flex-direction: column样式让子元素从上到下纵向排列。template a-flex vertical gapmiddle div第一行/div div第二行/div div第三行/div /a-flex /template从源码看该属性同时影响 className 的生成// components/flex/index.tsx { [${prefixCls.value}-vertical]: props.vertical ?? ctxFlex?.value.vertical, }对应的样式在 components/flex/style/index.ts 中定义-vertical: { flexDirection: column, },值得注意vertical的取值会与ConfigProvider提供的 flex 上下文ctxFlex做合并??即 ConfigProvider 层面的默认值优先级低于组件自身的显式传入。此外在垂直模式下如果未显式设置align组件会自动补充拉伸对齐样式详见 components/flex/utils.tsalignCls[${prefixCls}-align-stretch] !props.align !!props.vertical;wrap换行策略wrap直接映射 CSS 的flex-wrap属性默认值为nowrap。可选值在源码中被显式枚举components/flex/utils.tsexport const flexWrapValues [wrap, nowrap, wrap-reverse] as const;nowrap所有子元素单行显示必要时压缩自身尺寸默认wrap一行放不下时自动换行wrap-reverse换行方向反转多行时首行出现在下方。template a-flex wrapwrap gapsmall a-button v-foritem in 24 :keyitem typeprimaryButton/a-button /a-flex /templatejustify主轴对齐justify映射 CSS 的justify-content属性控制子元素在主轴水平模式为横向、垂直模式为纵向上的分布方式。源码枚举了全部可选值components/flex/utils.tsexport const justifyContentValues [ flex-start, flex-end, start, end, center, space-between, space-around, space-evenly, stretch, normal, left, right, ] as const;其中space-between两端对齐、space-around两侧均匀分布、space-evenly含两端完全等距是最常用的三种分布方式。组件通过生成${prefixCls}-justify-${value}类名再交由样式钩子生成对应 CSS// components/flex/style/index.ts const genJustifyContentStyle: GenerateStyleFlexToken token { const justifyStyle: CSSInterpolation {}; justifyContentValues.forEach(value { justifyStyle[${componentCls}-justify-${value}] { justifyContent: value }; }); return justifyStyle; };align交叉轴对齐align映射 CSS 的align-items属性控制子元素在交叉轴方向的对齐。源码枚举的可选值components/flex/utils.tsexport const alignItemsValues [ center, start, end, flex-start, flex-end, self-start, self-end, baseline, normal, stretch, ] as const;结合vertical使用时逻辑如下垂直模式下未传align时自动应用stretch拉伸传了则按传入值生效。这一点在测试用例中有明确验证components/flex/tests/index.test.jsit(when verticaltrue should stretch work, () { const wrapper mount({ render: () Flex verticaltest/Flex }); const wrapper2 mount({ render: () Flex vertical aligncentertest/Flex }); expect(wrapper.find(.ant-flex-align-stretch)).toBeTruthy(); expect(wrapper2.find(.ant-flex-align-center)).toBeTruthy(); });flex子元素伸缩简写flex属性映射 CSS 的flex简写属性支持 number 或 string 类型如1、1 1 auto、auto、1 0 100px等。从源码看该属性不是通过类名而是直接以内联样式写入目标元素components/flex/index.tsxif (flex) { mergedStyle.flex flex; }当某个子元素需要撑满剩余空间时直接给对应的 Flex 实例传flex1即可非常适用于固定宽度 自适应宽度混排的布局。gap间距控制gap是 Flex 组件最常用的属性支持两种形态预设尺寸small/middle/large对应主题 token 中的三档间距自定义尺寸string如16px、1rem或 number如16会被转换为16px。源码通过 components/_util/gapSize.ts 中的isPresetSize判断是否预设尺寸export function isPresetSize(size?: SizeType | string | number): size is SizeType { return [small, middle, large].includes(size as string); }若是预设尺寸生成${prefixCls}-gap-${gap}类名由样式钩子映射到主题 tokencomponents/flex/style/index.tsconst flexToken mergeTokenFlexToken(token, { flexGapSM: token.paddingXS, // small → paddingXS flexGap: token.padding, // middle → padding flexGapLG: token.paddingLG, // large → paddingLG }); // -gap-small { gap: token.flexGapSM } ...若是自定义值则直接以内联样式写入gap: ${gap}pxif (gap !isPresetSize(gap)) { mergedStyle.gap ${gap}px; }该行为在测试中亦有覆盖expect(wrapper2.element.style.gap).toBe(100px); // Flex gap{100}component自定义元素类型默认渲染为div传入其他组件或标签如span、section、ul、甚至是自定义组件时会按指定类型渲染。测试用例验证了这一点expect(wrapper.find(.ant-flex).element.tagName).toBe(DIV); expect(wrapper2.find(.ant-flex).element.tagName).toBe(SPAN); // Flex componentspan这在需要语义化标签如导航用nav、列表用ul或复用自定义组件的场景下非常有用。注意源码中使用component: Component div的解构默认值并会对justify、wrap、align、vertical等布局属性做omit避免它们被透传到真实 DOM 上{...omit(othersProps, [justify, wrap, align, vertical])}实际使用示例基本布局水平 / 垂直切换参考官方示例 components/flex/demo/basic.vuetemplate a-flex gapmiddle vertical a-radio-group v-model:valuevalue a-radio valuehorizontalhorizontal/a-radio a-radio valueverticalvertical/a-radio /a-radio-group a-flex :verticalvalue vertical div v-for(item, index) in new Array(4) :keyitem :style{ width: 25%, height: 54px, background: ${index % 2 ? #1677ff : #1677ffbf} } / /a-flex /a-flex /template script setup langts import { ref } from vue; const value ref(horizontal); /script对齐方式组合参考 components/flex/demo/align.vue将justify与align组合使用即可实现九宫格级别的对齐控制template a-flex gapmiddle alignstart vertical a-segmented v-model:valuejustify :optionsjustifyOptions / a-segmented v-model:valuealignItems :optionsalignOptions / a-flex :style{ width: 100%, height: 120px, border: 1px solid #40a9ff } :justifyjustify :alignalignItems a-button typeprimaryPrimary/a-button a-button typeprimaryPrimary/a-button a-button typeprimaryPrimary/a-button a-button typeprimaryPrimary/a-button /a-flex /a-flex /templatejustify常用值flex-start、center、flex-end、space-between、space-around、space-evenlyalign常用值flex-start、center、flex-end。预设间距与自定义间距参考 components/flex/demo/gap.vuegap既支持三档预设也支持用滑块实时传入数值template a-flex :gapgapSize ! customize ? gapSize : customGapSize a-button typeprimaryPrimary/a-button a-buttonDefault/a-button a-button typedashedDashed/a-button a-button typelinkLink/a-button /a-flex /template自动换行参考 components/flex/demo/wrap.vue当子元素数量多、宽度超过容器时配合wrapwrap自动换行template a-flex wrapwrap gapsmall a-button v-foritem in new Array(24) :keyitem typeprimaryButton/a-button /a-flex /template嵌套组合实现复杂布局Flex 组件支持任意层级嵌套。参考官方组合示例 components/flex/demo/combination.vue外层justifyspace-between做左右分布内层垂直 Flex 用alignflex-endjustifyspace-between做图片 标题 按钮的卡片式布局template a-card :style{ width: 620px } :body-style{ padding: 0, overflow: hidden } a-flex justifyspace-between img altavatar src... :style{ display: block, width: 273px } / a-flex vertical alignflex-end justifyspace-between :style{ padding: 32px } a-typography a-typography-title :level3 “antd is an enterprise-class UI design language and Vue UI library.” /a-typography-title /a-typography a-button typeprimary hrefhttps://antdv.com target_blankGet Start/a-button /a-flex /a-flex /a-card /template实现原理与注意事项类名生成与样式注入Flex 组件采用 ant-design-vue 标准的CSS-in-JS 样式方案渲染时通过useStyle(prefixCls)获得wrapSSR包装函数与hashId并结合 components/flex/utils.ts 中的createFlexClassNames批量生成ant-flex-wrap-*、ant-flex-align-*、ant-flex-justify-*类名。因此每个对齐/换行值最终都会落到类名上便于主题定制与调试。默认行为的隐藏细节文档强调的水平模式向上对齐、垂直模式拉伸对齐并非空话其实现位于 components/flex/utils.tsalignCls[${prefixCls}-align-stretch] !props.align !!props.vertical;即垂直模式下若不显式传align则自动应用stretch。这与 React 版 antd 的行为保持一致能保证纵向布局时子元素默认撑满交叉轴宽度。如果你需要垂直布局中让子元素按内容宽度收缩记得显式传入alignflex-start等值。与 ConfigProvider 的联动Flex 组件通过useConfigContextInject()读取 ConfigProvider 的 flex 上下文ctxFlex与directionrtl 支持全局层面可统一设置默认的垂直方向同时vertical属性采用props.vertical ?? ctxFlex?.value.vertical的合并策略组件级属性优先于全局配置。空容器自动隐藏在 components/flex/style/index.ts 中有一个容易被忽略的细节:empty: { display: none, },当 Flex 容器没有任何子节点时会被自动隐藏避免空容器在页面上留下多余空隙。渲染层面的注意事项Flex 组件默认inheritAttrs: false外部传入的class与style会与内部生成类名合并后一并渲染到根元素外部样式优先级与自定义能力都有保障gap传0时会被isPresetSize与if (gap)双重判断忽略因为 CSSgap默认值就是 0无需额外写入内联样式参见 components/_util/gapSize.ts 的注释说明需要语义化标签nav、section、ul等或自定义组件作为容器时使用component属性即可但需注意布局相关 props 不会透传到 DOM。总结Flex 组件以极小的 API 面7 个属性覆盖了 Flexbox 布局的核心能力gap解决间距、justify/align解决对齐、wrap解决换行、flex解决伸缩、component解决语义化渲染并天然支持与 ConfigProvider 联动与 rtl 场景。对于需要精细控制块级元素布局的页面优先选用 Flex 而非 Space垂直模式记得留意其默认的stretch对齐行为。相关源码可继续深入阅读 components/flex/index.tsx、components/flex/utils.ts、components/flex/style/index.ts 及测试用例 components/flex/tests/index.test.js。赞分享前端UI组件设计系统【免费下载链接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 项目地址https://gitcode.com/gh_mirrors/an/ant-design-vue点击查看免费下载相关推荐Ant Design Flex 组件完全指南弹性布局容器的 API、源码原理与实战用法Ant Design Flex 组件完全指南弹性布局容器的 API、源码原理与实战用法 Flex 是 Ant Designantd自 5.10.0 版本开前端UI组件设计系统Ant Design Space 组件完全指南间距布局、对齐控制与 Space.Compact 紧凑组合Ant Design Space 组件完全指南间距布局、对齐控制与 Space.Compact 紧凑组合 本指南以 antdAnt Design核心布局组前端UI组件设计系统ant-design-vue Space 组件完全指南统一间距布局与 Space.Compact 紧凑组合ant design vue Space 组件完全指南统一间距布局与 Space.Compact 紧凑组合 ant design vue 中的 Space 组前端UI组件设计系统上一篇变更说明下一篇终极指南如何将MacBook触控板变成精准电子秤创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考