AngularのFlex-Layoutについて（Flexboxやレスポンシブ対応）

いつの間にかスター数が増えてきたangular/Flex-Layoutの仕様についてまとめてみようと思います。

Angularで画面を作成する際、レイアウトやレスポンシブ対応を実装するとき役に立ちます

• CSSのFlexboxをcssを書かなくて簡単に実装できる
• レスポンシブ対応で非表示やクラス付与など

インポート

# npm
npm i -s @angular/flex-layout @angular/cdk
# yarn
yarn add @angular/flex-layout @angular/cdk

各種コンポーネントで使えるようにするためにモジュールにFlexLayoutModuleを登録する

app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';
...

@NgModule({
    ...
    imports: [ FlexLayoutModule ],
    ...
});

使用方法(レイアウト：Flexbox)

sample.html

<div fxLayout="row"> #fxlayout:boxの方向を決める
   <div fxFlex="10%"></div> #fxflex:上記で決めたboxの幅or高さを決める
   <div fxFlex="10%"></div>
   <div fxFlex="80%"></div>
</div>

親要素

fxLayout=""について

この設定値により子要素の配置方向を決める。

値	CSS	意味
''(default)	flex-direction: row	左から右に配置
row	flex-direction: row	左から右に配置
row-reverse	flex-direction: row-reverse	右から左に配置
column	flex-direction: column	上から下に配置
column-reverse	flex-direction: column-reverse	下から上に配置

fxLayoutAlign=""について

値	CSS	意味
''(default)	justify-content: flex-start	flex-directionで指定した方向の始めから配置
start or flex-start	justify-content: flex-start	flex-directionで指定した方向の始めから配置
center	justify-content: center	中央に揃え
end or flex-end	justify-content: flex-end	flex-directionで指定した方向の終わりから配置
space-around	justify-content: space-around	全てのFlexboxアイテムの左右に等しく配置
space-between	justify-content: space-between	隣り合うFlexboxアイテムの間隔を等しく配置
space-evenly	justify-content: space-evenly	Flexboxアイテムの間隔を等しく配置

子要素

fxFlex=""について

<div fxFlex="<basis>"></div>
or
<div fxFlex="<grow> <shrink> <basis>"></div>

fxFlexにboxの詳細情報を記載。値が一つの場合、下記のcssのFlexboxのflex-basisを設定したのと同意

/* 幅を指定 */
flex-basis: 10px;
flex-basis: auto;

/* 固有のサイズ指定キーワード */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* フレックスアイテムの内容物に基づいて自動設定する */
flex-basis: content;

/* グローバル値 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

<grow> <shrink> <basis>を設定した場合、
cssのflex-grow、flex-shrink、flex-basisを設定したのと同意である。
この3つは一緒に使用し、通常、すべての値が設定されることを保証するために一括指定される。

• flex-grow、flex-shrinkはスペースが余っている場合に、指定にしたがって分配するために使用する。
• flex-growは flex コンテナ内の他の flex アイテムと比較して、どのくらい大きくするか定義する。
• flex-shrinkは flex コンテナ内の他の flex アイテムと比較して、どのくらい小さくするか定義する。