前端UI组件【免费下载链接】flex-layoutProvides HTML UI layout for Angular applications; using Flexbox and a Responsive API项目地址https://gitcode.com/gh_mirrors/fl/flex-layout点击查看免费下载CSS Grid 是现代浏览器中构建网页布局的新一代引擎相比 Flexbox 多出了一维的布局控制能力。Angular Flex-Layoutangular/flex-layout为此新增了 11 个具备响应式能力的 Grid 指令让开发者可以在 Angular 模板中直接用声明式属性完成网格布局。本文将基于 guides/Grid.md 的官方指南结合仓库源码、单元测试与 demo 应用完整讲解这 11 个指令的用法、取值、默认值、响应式断点机制以及它们与既有 Flexbox 指令混用的实战方案。为什么在 Angular 中使用 CSS Grid 指令CSS Grid 是一个相对较新、功能强大的布局规范已获得所有主流常青evergreen浏览器支持。与 Flexbox 相比它提供了一种额外的维度表达能力Flexbox 主要面向一维的行或列布局而 Grid 允许开发者同时控制行与列构建真正二维的页面骨架。Angular Flex-Layout 将这套能力封装为11 个新的响应式指令使开发者无需手写 CSS 类或媒体查询即可在模板中直接声明网格行为。指令的命名遵循统一约定前缀gdGrid Directive 对应的 CSS 属性名例如gdColumns对应grid-template-columns、gdArea对应grid-area。安装与模块导入要使用 Grid 指令有两种导入方式方式一导入顶层模块FlexLayoutModule会同时引入 Flex、Grid、Extended 三组指令import {FlexLayoutModule} from angular/flex-layout;从 module.ts 的源码可以看到FlexLayoutModule内部直接imports并exports了FlexModule、ExtendedModule与GridModule因此一次导入即可获得全部能力。方式二按需分别导入FlexModule与GridModule以便利用 tree shaking 减小打包体积import {FlexModule} from angular/flex-layout/flex; import {GridModule} from angular/flex-layout/grid;import {NgModule} from angular/core; import {GridModule} from angular/flex-layout/grid; NgModule({ imports: [ // ...other imports GridModule, ] }) export class AppModule {}GridModule的声明与导出集中在 grid/module.ts它依赖CoreModule并一次性注册了 11 个默认指令DefaultGridAlignDirective、DefaultGridAlignColumnsDirective、DefaultGridAlignRowsDirective、DefaultGridAreaDirective、DefaultGridAreasDirective、DefaultGridAutoDirective、DefaultGridColumnDirective、DefaultGridColumnsDirective、DefaultGridGapDirective、DefaultGridRowDirective、DefaultGridRowsDirective。GridModule的全部公开导出见 grid/public-api.ts。指令与 CSS 属性对照总表这一套指令覆盖面广基本涵盖了 CSS Grid 的大部分核心功能。官方指南给出了指令与 CSS 属性的对照表Grid DirectiveCSS Property(s)Extra InputsgdAlignColumnsalign-content和align-itemsgdInlinefor inline-gridgdAlignRowsjustify-content和justify-itemsgdInlinefor inline-gridgdAreagrid-areanonegdAreasgrid-areasgdInlinefor inline-gridgdAutogrid-auto-flowgdInlinefor inline-gridgdColumngrid-columnnonegdColumnsgrid-template-columnsgdInlinefor inline-grid!结尾表示grid-auto-columnsgdGapgrid-gapgdInlinefor inline-gridgdGridAlignjustify-self和align-selfnonegdRowgrid-rownonegdRowsgrid-template-rowsgdInlinefor inline-grid!结尾表示grid-auto-rows关于上表官方指南特别强调除非另有说明以上均为精确对等映射——指令的输入值会原样verbatim写入对应的 CSS 属性不经过任何消毒sanitization处理。这意味着你在gdColumns上写什么值grid-template-columns就得到什么值例如gdColumns100px 1fr、gdColumnsrepeat(auto-fill, minmax(200px, 1fr))都是合法用法。11 个指令逐个详解默认值与取值规则从源码层面看每个指令都由两部分组成一个StyleBuilder负责把输入值翻译成 CSS 声明和一个继承BaseDirective2的指令类负责与响应式调度器对接。下面按容器指令与子项指令分组说明。容器指令gdColumns——grid-template-columns源码位于 grid/columns/columns.ts。默认值为none当输入以!结尾时前缀会被剥离并改投到grid-auto-columns属性。同时该指令会隐式设置display: grid配合gdInline则为inline-grid。示例div gdColumns100px 1fr !-- 相当于 display: grid; grid-template-columns: 100px 1fr; -- /div div gdColumns100px 1fr auto! !-- 相当于 grid-auto-columns: 100px 1fr auto -- /divgdRows——grid-template-rows源码位于 grid/rows/rows.ts规则与gdColumns完全对称默认值none!结尾表示grid-auto-rows。gdAreas——grid-template-areas源码位于 grid/areas/areas.ts。默认值为none使用|作为区域行的分隔符每个|分隔的片段会先trim再被包上双引号最终由空格拼接成grid-template-areas的值。这正是gdAreasheader | header | sidebar | footer会生成header header sidebar footer的原因且对多余空格不敏感测试 areas.spec.ts 专门验证了weird spacing场景。gdGap——grid-gap源码位于 grid/gap/gap.ts。默认值为0语法为row gap [column-gap]即可以只写一个值或同时指定行/列两个间隙值div gdGap10px/div !-- grid-gap: 10px -- div gdGap10px 15px/div !-- grid-gap: 10px 15px --gdAuto——grid-auto-flow源码位于 grid/auto/auto.ts。默认值为initial它会把输入按空格拆成方向 可选 dense两段方向只接受row、column、dense非法方向回退为rowdense仅在方向不为dense时追加。因此gdAutocolumn dense得到grid-auto-flow: column dense而gdAutoinvalid dense会被规整为row dense见 auto.spec.ts 对无效值的过滤验证。gdAlignColumns——align-contentalign-items源码位于 grid/align-columns/align-columns.ts。输入格式为两个空格分隔的值默认start stretch。第一个值主轴映射到align-content支持center、space-around、space-between、space-evenly、end、start、stretch第二个值交叉轴映射到align-items支持start、center、end、stretch非法值回退默认。gdAlignRows——justify-contentjustify-items源码位于 grid/align-rows/align-rows.ts逻辑与gdAlignColumns对称主轴值映射到justify-content交叉轴值映射到justify-items默认同为start stretch。子项指令gdArea——grid-area源码见 grid/area/area.ts默认值auto输入原样映射。gdColumn——grid-column源码见 grid/column/column.ts默认值auto输入原样映射支持gdColumnauto / span 2这类跨越写法。gdRow——grid-row源码见 grid/row/row.ts默认值auto输入原样映射测试 row.spec.ts 验证了gdRowspan 2 / 6的解析。gdGridAlign——justify-selfalign-self源码见 grid/grid-align/grid-align.ts。这是作用于 Grid 子项的自对齐指令输入格式为row-axis [column-axis]或单个行轴值。行轴映射到justify-self、列轴映射到align-self二者默认均为stretch只接受start、center、end、stretch非法值自动回退测试见 grid-align.spec.ts。gdInline与!后缀两个重要的附加输入对照表中反复出现的gdInline与!后缀值得单独说明gdInline布尔型输入通过coerceBooleanProperty转换见 columns.ts 等实现开启后display从grid变为inline-grid。它适用于所有会生成display声明的容器指令gdAlignColumns、gdAlignRows、gdAreas、gdAuto、gdColumns、gdGap、gdRows。!后缀仅对gdColumns与gdRows生效用于把声明从模板轨道切换到自动轨道gdColumns120px!生成的将是grid-auto-columns: 120px而非grid-template-columns。响应式断点用法一个属性、全套媒体查询这是整套 Grid 指令相较原生 CSS Grid 的核心增值点每一个指令都内置了完整的响应式输入。以gdColumns为例源码 columns.ts 注册的输入与选择器包括gdColumns gdColumns.xs gdColumns.sm gdColumns.md gdColumns.lg gdColumns.xl gdColumns.lt-sm gdColumns.lt-md gdColumns.lt-lg gdColumns.lt-xl gdColumns.gt-xs gdColumns.gt-sm gdColumns.gt-md gdColumns.gt-lg其他 10 个指令均遵循完全相同的断点后缀约定。这些断点别名与媒体查询的对应关系定义在 core/breakpoints/data/break-points.ts例如xs为screen and (min-width: 0px) and (max-width: 599.98px)lt-md为screen and (max-width: 959.98px)gt-sm为screen and (min-width: 960px)。lt-*与gt-*为重叠断点其余为互斥断点更小的范围拥有更高的优先级。响应式能力由MediaMarshaller见 core/media-marshaller/media-marshaller.ts统一调度指令通过基类 BaseDirective2 注册值回调当断点变化时自动选取当前激活断点对应的值并调用StyleBuilder重新计算样式。测试 columns.spec.ts 演示了完整流程div gdColumns100px 1fr gdColumns.xs50px 1fr/div在xs断点下应用50px 1fr切换到md后自动回退到默认的100px 1fr。与 Flexbox 无缝混用官方指南明确说明新的 CSS Grid 指令可以与既有 Flexbox 指令无缝配合。只要导入了顶层FlexLayoutModule或同时导入FlexModule与GridModule就能在一个 Grid 容器内部继续使用fxLayout、fxFlex等 Flexbox 指令div gdAuto div fxLayoutrow div fxFlex/div /div /div这层兼容性来自模块层面FlexLayoutModule同时导出 Flex 与 Grid 两套指令集见 module.ts因此可以在同一组件树中自由混排例如外层用 Grid 划定页面骨架、内层用 Flexbox 处理单行内的弹性分配。完整实战示例来自 demo 应用的真实布局仓库的 demo 应用projects/apps/demo-app/src/app/grid/提供了可直接参考的完整示例展示多个指令的协同使用。基础响应式网格grid-layout.component.ts用gdAreasgdColumnsgdGap的组合在不同断点下重组圣杯式页面骨架div gdAreas.xsheader | sidebar | content | sidebar2 | footer gdGap1em gdColumns.xsnone gdAreas.smheader header | sidebar content | sidebar2 sidebar2 | footer footer gdColumns.sm20%! gdAreas.gt-smheader header header | sidebar content sidebar2 | footer footer footer gdColumns.gt-sm120px auto 120px gdGap.gt-sm20px div classblocks one gdAreaheaderHeader/div div classblocks two gdAreasidebarSidebar/div div classblocks three gdAreasidebar2Sidebar 2/div div classblocks four gdAreacontentContent/div div classblocks five gdAreafooterFooter/div /div注意gdColumns.sm20%!正是!后缀的实战用法——小屏下仅声明自动列宽。自适应列minmaxgrid-minmax.component.ts将完整的repeat(auto-fill, minmax(200px, 1fr))语法原样写入指令配合子项跨越div gdGap10px gdColumnsrepeat(auto-fill, minmax(200px, 1fr)) div classbox gdColumnauto / span 2A/div ... div classbox gdColumnauto / span 2 gdRowauto / span 2G/div ... /div嵌套 Gridgrid-nested.component.ts展示带名称的轨道线[col]、[row]与嵌套网格div gdGap20px gdColumnsrepeat(4, [col] 150px) gdRowsrepeat(2, [row] auto) div classbox gdColumncol / span 2 gdRowrowA/div ... div classbox gdColumncol 3 / span 2 gdRowrow 2 gdGap10px gdColumns1fr 1fr !-- 嵌套的子网格 -- /div /div定位与叠加grid-position.component.ts、grid-overlay.component.ts用gdArea分配命名区域或用gdColumncontent-start / content-endgdRowheader-start / content-end通过网格线让元素覆盖多个区域实现叠加层。这些组件统一由DocsGridModulegrid/grid.module.ts注册可在 demo 应用的路由页中直接查看渲染效果。浏览器兼容性限制官方指南明确指出虽然 CSS Grid 拥有优秀的跨浏览器与移动端支持但由于 IE11 采用了过时的规范实现目前 Grid 指令不支持 IE11。此外从测试代码中可以看到一些已知的平台差异处理均为测试侧的防御性跳过非指令功能缺失Edge 14grid 相关测试整体跳过见 columns.spec.ts 的注释Firefox自动轨道存在已知问题对应 rachelandrew/gridbugs 中的已知 bug相关断言被跳过WebKitgrid-gap会被浏览器解析为grid-row-gap/grid-column-gap的形式测试断言因此按平台分支处理见 gap.spec.ts。面向现代常青浏览器开发时这些差异通常不会影响指令本身的可用性。内部实现原理指令如何翻译成 CSS理解了用法之后再快速梳理一遍源码级的运作机制便于排查问题与二次开发样式构建StyleBuilder每个指令配套一个Injectable({providedIn: root})的StyleBuilder其buildStyles(input, parent)方法接收指令输入值与附加上下文如{inline: boolean}返回 CSS 声明对象。例如GridGapStyleBuilder.buildStyles固定输出display与grid-gap两个键gap.ts。值注册MediaMarshaller指令构造时调用基类的init()把自己绑定到中心化的MediaMarshallerbase2.ts。Input变化时ngOnChanges按断点后缀拆分键名如gdColumns.xs拆出断点xs并写入 marshaller。样式应用与缓存断点激活时updateWithValue被回调指令按当前inline状态选择对应的样式缓存 Map如columnsCache/columnsInlineCache避免重复计算columns.ts。销毁清理ngOnDestroy调用marshal.releaseElement释放元素上注册的值与订阅base2.ts。这一输入 → MediaMarshaller 调度 → StyleBuilder 构建 → 样式缓存的链路与 Flexbox 指令如fxLayout、fxFlex完全一致这也是 Grid 与 Flexbox 指令能够无缝共存于同一套响应式体系下的根本原因。进一步阅读官方指南原文guides/Grid.mdGrid 入口包说明与单独导入示例projects/libs/flex-layout/grid/README.md模块与公开 APIgrid/module.ts、grid/public-api.ts各指令源码与测试grid/columns/columns.ts、grid/auto/auto.ts、grid/areas/areas.ts、grid/gap/gap.ts以及对应的.spec.ts测试文件响应式断点定义core/breakpoints/data/break-points.ts可运行示例projects/apps/demo-app/src/app/grid/赞分享前端UI组件【免费下载链接】flex-layoutProvides HTML UI layout for Angular applications; using Flexbox and a Responsive API项目地址https://gitcode.com/gh_mirrors/fl/flex-layout点击查看免费下载相关推荐angular/flex-layout 响应式 ngClass 指令 API 深度解析angular/flex layout 响应式 ngClass 指令 API 深度解析 ngClass 是 angular/flex layout 中 Ex前端UI组件Angular Flex-Layout 之 fxFlex 指令完全指南flex-grow / flex-shrink / flex-basis 响应式伸缩实战Angular Flex Layout 之 fxFlex 指令完全指南flex grow / flex shrink / flex basis 响应式伸缩实战前端UI组件CANN/ops-math 反双曲正弦梯度算子AsinhGrad 产品支持情况 | 产品 | 是否支持 | | : | : : | | term Ascend 950PR/Ascend 950DT/te算子库人工智能深度学习CANNAscend上一篇深入解析 wp-calypso Stepper 的 Onboarding Sessions会话机制、持久化原理与 Checkout 回退实践下一篇使用 AWS SDK for Java (v2) 构建照片资产管理PAM应用Rekognition 标签识别、DynamoDB 计数与 S3 归档下载全流程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
