本月我们推出了一个新的博客系列“Angular 中的现代 CSS”，其中我们将了解为 Angular 开发人员推荐的现代 CSS 增强功能。

本周，我们将讨论布局。

自 Angular 早期以来，布局已经取得了显着的进步。基于原生布局解决方案的进步和取消对 IE11 的支持，Angular 团队将从 v15 开始停止发布实验性@angular/flex-layout库的新版本。

@angular/flex-layout是一个混合 JavaScript 和 CSS 布局系统，自 v5 以来一直在 Angular 组织中处于测试阶段。在此期间，CSS 发生了巨大的发展，提供了构建高性能和可扩展布局的新方法。在这篇博文中，您将详细了解 Angular 中推荐的布局方法。

现代 CSS 布局

最值得推荐的两种现代 CSS 布局解决方案是 CSS Flexbox 和 CSS Grid。

CSS Flexbox 

Flexbox是一种一维布局方法，允许您按行或列排列项目。项目可以弯曲（展开）以填充额外的空间或收缩以适应较小的空间。

您可以在此处查看 Angular 演示中的 Flexbox ：

我们推荐CSS Tricks: A Complete Guide to Flexbox来开始学习 Flexbox。

一般来说，Flexbox 是应用程序中的组件和小规模布局的不错选择。 CSS 网格布局适用于更大规模的布局。详细了解Flexbox 和 CSS Grid 的权衡。

CSS Grid

CSS Grid 是一个用于 Web 的二维布局系统。它允许您按行和列排列内容。它具有许多功能可以帮助开发人员更轻松地构建复杂的布局。

您可以在此处查看 Angular 演示中的 CSS 网格：

我们推荐CSS Tricks: A Complete Guide to Grid来开始学习网格。

Flex、grid 和 Flex 布局的未来

Angular 的核心原则是关注点分离。通过弃用 flex-layout 并转而使用 CSS，我们继续引导用户使用更具可读性和可维护性的代码。此外， @angular/cdk的布局包提供了轻量级实用程序来构建响应式 UI 。与@angular/flex-layout相比，这些选项可以减少负载大小和运行时成本，并提高站点的Lighthouse 性能指标。

从今天开始，我们将遵循Angular 的弃用实践。由于@angular/flex-layout是 beta 包，Angular v15 将发布@angular/flex-layout的最后一个版本。

虽然@angular/flex-layout从未退出测试版，但它已获得采用，每周下载量超过 30 万次。为了支持依赖该软件包的应用程序，我们将继续发布安全和浏览器不兼容性修复程序至少一年，作为该软件包长期支持 (LTS) 的一部分。

迁移到现代 CSS 的计划

选择现代布局系统基于您的应用程序的结构。在 Chrome 的学习 CSS 课程中了解有关现代布局的更多信息。

我们感谢 Angular 社区贡献者和angular/flex-layout合著者Adam Plumer ，他多年来一直支持angular/flex-layout的发布。请阅读Adam 的《告别 Flex 布局》了解更多内容。

Adam 自愿为最流行的用例编写迁移指南 – 我们很想听听您希望在此 GitHub 问题中获得有关哪些angular/flex-layout迁移的更多指导。

虽然由于库的复杂性和动态用例，我们无法通过自动迁移直接映射到新的布局系统，但我们可以推荐四种布局工具。以下是高级概述：

CSS Flexbox

Flexbox 与@angular/flex-layout最相似，因为@angular/flex-layout旨在为开发人员提供一种符合人体工程学的方式，在 Angular 模板中应用 Flexbox 布局。以下代码示例是常见 Flexbox 属性和@angular/flex-layout中的关联属性的映射。

display: flex;
flex-direction: row // fxLayout
flex-wrap: wrap //fxLayout
box-sizing: border-box;
align-content: stretch, // fxLayoutAlign
align-items: stretch, // fxLayoutAlign
justify-content: flex-start, // fxLayoutAlign

CSS Grid

许多 CSS 调查都强调了 CSS 网格作为二维布局的未来的潜力。由于现代 CSS 网格比 Flex 布局的设计更新，因此从 Flex 布局迁移到 CSS 网格是一个更加手动的过程，以便利用相关属性。

@angular/cdk的布局包

如果您需要在 TypeScript 代码中使用特定于布局的实用程序来处理视口大小，Angular 还提供了 @angular/cdk 的布局包。

这@angular/cdk的布局包主要适用于需要在代码中构建响应式 UI 交互的用例，而不是通常创建应用程序布局。例如，对于大视口，您希望将弹出窗口显示为附加到触发元素的下拉菜单，但在小视口上，您希望将弹出窗口显示为居中对话框。

TailwindCSS

Tailwind CSS 提供了一种面向模板的样式方法，类似于@angular/flex-layout 。

Tailwind CSS 是一个实用程序优先的 CSS 框架，包含flex 、 pt-4 、 text-center和rotate-90等类，可以直接在标记中组合这些类来构建任何设计。阅读有关 Angular + Tailwind CSS 的更多信息。

我们建议您在规划迁移时探索所有四种现代选项。

谢谢

我们想花点时间感谢多年来为该项目做出贡献的所有人。

我们很高兴看到 CSS 多年来的发展以及它提供的现代布局替代方案。

推荐原生解决方案作为最佳实践，可以让开发人员保持高性能，同时让 Angular 团队能够专注于高影响力的项目，进一步推动 Angular 走向未来。

直到下一次，去构建现代 CSS（接下来加入我们看看可见性）！

接下来您想学习 Angular 中的哪些 CSS？

原文链接：https://blog.angular.dev/modern-css-in-angular-layouts-4a259dca9127