由于Angular Flex-Layout即将停止开发，我将整理并进行必要的改写等操作

3 年 ago

逸, 科

1 minute

当我对Angular14进行更新时，收到了一个警告，说Angular Flex-Layout将会停止开发，现在我来简单总结一下。

概述

開発終了の報告
開発者の方（CaerusKaruさん）が15系のバージョンはリリースするとこちらのissuesでも言及されています。

公式のissuesに移行ガイドがあります。
以前から開発に関わっていた有志の方が、場合によっては開発を引き継ぐと表明してくださっています！今後どうなるかはわからないですが…

除了tailwind等选择外，作为换乘的选择，这次我决定简单地用Sass来替代。如果您能根据需要进行适当转换，我将非常感激。

如果你想要使用Tailwind，请参考这篇日文文章。

补充说明：
在迁移指南中，热心人士已经添加了许多将 css 替换的示例。如果参考这些示例，大部分情况应该可以替换为 css！

实施

只需一种选择：

src/styles.sass在Angular.json中进行全局配置，或者在每个目录中的Sass中进行追加。然后只需要用Angular Flex-Layout替换已经在html中进行的class等内容。

：例

.test
  display: flex
  flex-direction: column
  align-content: center
  align-items: end
  column-gap: 2vh

<!-- angular Flex-Layout -->
<div class="common" fxLayout="column" fxLayoutAlign="center end" fxLayoutGap="2vh">

<!-- testクラスを利用した書き換え -->
<div class="test">

以下是主要用于flex-layout的例子，我认为它们组合起来会很不错。

.flex-row
   display: flex
   flex-direction: row

.flex-col
   display: flex
   flex-direction: column

.flex-row-wrap
   display: flex
   flex-direction: row
   flex-wrap: wrap

.flex-col-wrap
   display: flex
   flex-direction: column
   flex-wrap: wrap
 
.fxFlex
  flex: 1

.flex-grow
  flex-grow: 1

.flex-initial
  flex: initial

.flex-layout
  justify-content: flex-start

.flex-layout-space-between
  justify-content: space-between
  
.flex-layout-justify-center
  justify-content: center

.flex-layout-center
  align-items: center

.flex-layout-space-around
  justify-content: space-around

.flex-layout-start-center
  justify-content: flex-start
  align-items: center

.flex-layout-space-between-center
  justify-content: space-between
  align-items: center
  
.flex-layout-stretch
  align-content: stretch
  align-items: stretch

.flex-layout-row-gap
  row-gap: 1.5em

.flex-layout-column-gap
  column-gap: 1.5em

参考：在[Angular8]网站上简单进行样式设计！总结Angular Flex-Layout的使用方法 | DevelopersIO

CSS（层叠样式表）用于布局Flex容器中的项目。