angular14系のアップデートを行った際、warningでAngular Flex-Layoutが開発終了することを知ったので簡単にまとめてみます。
概要
- 長らくBeta版だったAngular Flex-Layoutが開発終了するらしいです。
- 開発終了の報告
- 開発者の方（CaerusKaruさん）が15系のバージョンはリリースするとこちらのissuesでも言及されています。
- 公式のissuesに移行ガイドがあります。
- 以前から開発に関わっていた有志の方が、場合によっては開発を引き継ぐと表明してくださっています！今後どうなるかはわからないですが…
乗り換え先としてtailwindなどの選択肢もありますが、今回は簡単にSassで置き換えることにします。適宜読み替えていただけると幸いです。
tailwindに乗り換えたい場合は、この日本語の記事が参考になるかと思います。
追記
移行ガイド内で有志の方がcssに置き換える例をかなり追加してくれていました。こちらを参考にすると大方はcssに置き換えられると思います！
実装
Sassの記述をAngular.jsonでグローバル設定したsrc/styles.sass、あるいは各ディレクトリ内の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