AngularにFlexレイアウトを使用する方法

序章

Flex Layout は、テンプレートで使用できる一連のディレクティブを備えたCSSFlexboxを使用してページレイアウトを作成できるようにするコンポーネントエンジンです。

ライブラリは純粋なTypeScriptで記述されているため、外部のスタイルシートは必要ありません。 また、応答性の高いレイアウトを作成するために、さまざまなブレークポイントでさまざまなディレクティブを指定する方法も提供します。

このチュートリアルでは、サンプルのAngularアプリケーションを作成し、FlexLayoutを使用してアイテムを配置します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

• Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
• AngularプロジェクトのセットアップおよびAngularコンポーネントの使用にある程度精通していると有益な場合があります。

このチュートリアルは、ノードv14.13.1、npm v6.14.8、angular v10.1.6、および@angular/flex-layoutで検証されました。

ステップ1—プロジェクトの設定

@ angle / cli を使用して、新しいAngularプロジェクトを作成できます。

ターミナルウィンドウで、次のコマンドを使用します。

npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests

これにより、スタイルが「CSS」（「Sass」、「Less」、「Stylus」ではなく）に設定され、ルーティングが行われず、テストがスキップされる新しいAngularプロジェクトが構成されます。

新しく作成されたプロジェクトディレクトリに移動します。

cd angular-flex-example

プロジェクトフォルダから、次のコマンドを実行してFlexLayoutをインストールします。

npm install @angular/[email protected]

次に、アプリモジュールにFlexLayoutModuleをインポートします。

src / app / app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from "@angular/flex-layout";

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

プロジェクトを開始して、エラーがないことを確認します。

npm start

Webブラウザでローカルアプリ（通常はlocalhost:4200）にアクセスすると、"angular-flex-example app is running!"メッセージが表示されます。

このスキャフォールディングを設定すると、テンプレートでFlexLayoutを使用できます。

ステップ2—Flexレイアウトを試す

次に、app.component.htmlテンプレートをFlexLayoutModuleを使用するように変更します。

このチュートリアルでFlexLayoutを試した最終結果を示す図は次のとおりです。

まず、コードエディタでapp.component.cssを開き、次のコード行を追加します。

src / app / app.component.css

.container {
  margin: 10px;
}

.item {
  border-radius: .2em;
  color: #ffffff;
  font-family: sans-serif;
  font-size: 2em;
  padding: 4em 1em;
  text-transform: uppercase;
}

.item-1 {
  background-color: #009169;
}

.item-2 {
  background-color: #55b296;
}

.item-3 {
  background-color: #9fd3c3;
}

.item-4 {
  background-color: #e7b013;
}

.item-5 {
  background-color: #073443;
}

次に、コードエディタでapp.component.htmlを開き、コードを2つのコンテナdivと5つの内部アイテムdivに置き換えます。

src / app / app.component.html

<div class="container">
  <div class="item item-1">
    Item 1
  </div>
  <div class="item item-2">
    Item 2
  </div>
  <div class="item item-3">
    Item 3
  </div>
</div>

<div class="container">
  <div class="item item-4">
    Item 4
  </div>
  <div class="item item-5">
    Item 5
  </div>
</div>

再コンパイル後、Webブラウザでアプリケーションにアクセスします。 これで、5つのdivが互いに積み重ねられます。

次に、fxLayoutを追加します。

src / app / app.component.html

<div class="container"
     fxLayout
>
  <div class="item item-1">
    Item 1
  </div>
  <div class="item item-2">
    Item 2
  </div>
  <div class="item item-3">
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
>
  <div class="item item-4">
    Item 4
  </div>
  <div class="item item-5">
    Item 5
  </div>
</div>

このコードは、display: flexおよびflex-direction: rowスタイルをコンテナーdivに適用します。

再コンパイル後、Webブラウザーでアプリケーションにアクセスすると、上の行を共有している3つのdivと、下の行を共有している2つのdivが表示されます。

次に、fxLayoutAlignとfxLayoutGapを追加します。

src / app / app.component.html

<div class="container"
     fxLayout
     fxLayoutAlign="center"
     fxLayoutGap="10px"
>
  <div class="item item-1">
    Item 1
  </div>
  <div class="item item-2">
    Item 2
  </div>
  <div class="item item-3">
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayoutAlign="center"
     fxLayoutGap="10px"
>
  <div class="item item-4">
    Item 4
  </div>
  <div class="item item-5">
    Item 5
  </div>
</div>

このコードは、place-content: stretch centerおよびalign-items: stretchスタイルをコンテナーdivに適用します。 また、フレックスアイテム間に10pxのスペースを適用します。

注：バージョン10.0.0-beta.32では、fxLayoutGapはCSSプロパティgapを使用する代わりに、CSSプロパティmarginを使用します。

次に、レスポンシブサフィックスを使用して、特定のブレークポイントでフレックスボックスのスタイルを変更します。

src / app / app.component.html

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-1">
    Item 1
  </div>
  <div class="item item-2">
    Item 2
  </div>
  <div class="item item-3">
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-4">
    Item 4
  </div>
  <div class="item item-5">
    Item 5
  </div>
</div>

このコードは、xs（非常に小さい）画面サイズにブレークポイントを設定します。 レイアウトがデフォルトの"row"から"column"に変更され、ギャップサイズが"10px"から"0"に変更されます。

再コンパイル後、Webブラウザでアプリケーションにアクセスします。 ブラウザウィンドウのサイズをxsブレークポイント（599px幅未満）に変更し、スタイルの変化を観察します。

ブレークポイントエイリアスは、さまざまな画面サイズで使用できます。

• sm-小さい
• md-中
• lg-大
• xl-特大

子要素に追加できるディレクティブもあります。

次に、fxFlexを追加します。

src / app / app.component.html

<div class="container"
     fxLayout
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-1"
       fxFlex="15%"
  >
    Item 1
  </div>
  <div class="item item-2"
       fxFlex="20%"
  >
    Item 2
  </div>
  <div class="item item-3"
       fxFlex
  >
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-4"
       fxFlex
  >
    Item 4
  </div>
  <div class="item item-5"
       fxFlex="200px"
  >
    Item 5
  </div>
</div>

このコードは、flex-grow: 1、flex-shrink: 1、およびflex-basis: 100%を適用します。 幅の値を指定すると、max-widthプロパティが適用されます。

次に、fxFlexOrderとfxFlexOffsetを追加します。

src / app / app.component.html

<div class="container"
     fxLayout
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-1"
       fxFlex="15%"
  >
    Item 1
  </div>
  <div class="item item-2"
       fxFlex="20%"
       fxFlexOrder="3"
  >
    Item 2
  </div>
  <div class="item item-3"
       fxFlex
  >
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-4"
       fxFlex
       fxFlexOffset="50px"
       fxFlexOffset.xs="0"
  >
    Item 4
  </div>
  <div class="item item-5"
       fxFlex="200px"
  >
    Item 5
  </div>
</div>

このコードは、order: 3を2番目のアイテムに適用します。 4番目のアイテムにもmargin-left: 50pxが適用されます。

再コンパイル後、Webブラウザーでアプリケーションにアクセスすると、2番目の項目が行の3番目の位置にあり、4番目の項目のフレックスボックスの先頭から50pxの間隔があることがわかります。

これで、FlexLayoutの簡単な実験は終わりです。

結論

このチュートリアルでは、AngularアプリケーションでFlexLayoutを使用しました。 これにより、追加のスタイル設定なしで、事前構成されたFlexboxCSSスタイルを使用してレイアウトを構築できました。

使用可能なディレクティブの詳細については、APIの概要を参照してください。

この例では、ディレクティブ値をハードコーディングしました。 データバインディングを使用して、コンポーネントクラス（[fxLayout]="direction"など）の値にバインドすることもできます。 これにより、ユーザーが制御および変更できる非常に動的なレイアウトを作成できます。

Flex Layoutは、マテリアルデザインコンポーネントの AngularMaterialと組み合わせて使用することもできます。