AngularでFlex Layoutを実装する：ハウツーガイド

Hark Labs2022-05-12 · 9 min read

はじめに

CSS Flex Layout は、柔軟で流動的なレイアウトを作成するために使用されます。しかし、Angular を使用する場合、レイアウトをより動的に制御する必要があるシナリオが存在します。さらに、CSS の Flexbox を使用するには複雑なスタイリングが必要であり、多くの開発者にとって困難な場合があります。Flex Layout は、この問題を解決することを目的としたコンポーネントエンジンです。アプリケーションに実装可能な一連のディレクティブを提供します。

Flex Layout は Typescript を使用しているため、Angular アプリケーションに最適です。外部スタイルシートは不要で、さまざまなディレクティブを使用してレスポンシブなレイアウトを作成できます。このチュートリアルでは、シンプルな Angular アプリケーションを作成し、Flex Layout を注入してコンポーネントを配置します.

始めましょう！

前提条件

Angular アプリケーションは Node.js ランタイムを使用します。このチュートリアルを完了するには、開発マシンに Node.js がインストールされている必要があります。Node.js を簡単にセットアップするのに役立つ、完全なガイド Ubuntu 18.04 に Node.js をインストールする方法を用意しています。
また、Angular コンポーネントの使用方法および Angular プロジェクトのセットアップ方法.

プロジェクトの構成

ここでは、次の2つのステップを実行する必要があります。

新しい Angular アプリケーションをセットアップする必要があります。
アプリケーションでインポートして使用できるように、 npx から Flex Layout をインストールする必要があります。

新しい Angular アプリケーションを作成するには、ターミナルを開いて以下のコマンドを実行します。

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

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

ここでは、 @angular/cli を使用して新しい Angular アプリケーションを作成しています。アプリケーション名は angular-flex-example です。スタイリングには Sass や Less ではなく CSS を使用します。さらに、ルーティングは不要であることを指定します。テストも必要ないため、スキップします。

アプリケーションの準備ができたら、アプリケーションのディレクトリに移動し、以下のコマンドを実行して Flex Layout をインストールします。

cd angular-flex-example
npm install @angular/flex-layout@10.0.0-beta.32

1 2	cd angular-flex-example npm install @angular/flex-layout@10.0.0-beta.32

上記のコマンドでインストールが完了したら、アプリモジュールに以下のコードを追加して FlexLayoutModule:

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 { }

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

npm start

アプリケーションはデフォルトで localhost:4200 で提供されます。ウェブブラウザでこの URL にアクセスしてください。次のメッセージが表示されます： “angular-flex-example is running!。このセットアップが完了したら、Flex Layout を使用してテンプレートを設計しましょう。

Flex Layout の作成

ここでは、 app.component.html にコードを追加して、 FlexLayoutModule で Flex Layout を使用します。最終的な結果は以下の図のようになります。

上記の結果を得るには、エディタで 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;
}

.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があります:

<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>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

その後、アプリケーションをコンパイルして実行します。5つの divが、これまでレイアウトを指定していないため縦に積み重なって表示されます。 fxLayoutを追加するには、以下のコードを追加します：

<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>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

上記のコードで、この fxLayoutを適用すると、CSSプロパティの display:flex と flex-direction:row スタイルがコンテナの divに適用されます。これでアプリケーションを実行すると、最初の行に3つのdiv、下の行に2つのdivが表示されます。

次に、以下を追加します。 fxLayoutAlign と fxLayoutGap を追加して、レイアウトを強化します：

<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>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

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

これで fxLayout を適用したので、レイアウトをレスポンシブ対応にしましょう：

<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>

Item 1

</div>

Item 2

</div>

Item 3

</div>

Item 4

</div>

Item 5

</div>

このコードは、極小（extra small）の xs 画面のブレークポイントを設定します。極小画面では、レイアウトがデフォルトの行（row）から列（column）に変更され、ギャップのサイズが “10px” から “0px” に縮小されます。アプリケーションを実行し、ウィンドウサイズを xs （幅 599px 未満）にリサイズすることで、これを確認できます。スタイルが変更されるのがわかります。

さまざまな画面サイズに対して、異なるサフィックス（接尾辞）が用意されています：

sm – small
md – medium
lg – large
xl – extra-large

子要素用のディレクティブもあります。以下のように fxFlex を追加します：

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-1" fxFlex="15%">
        アイテム 1
    </div>

    <div class="item item-2" fxFlex="20%">
        アイテム 2
    </div>

    <div class="item item-3" fxFlex>
        アイテム 3
    </div>

</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">

    <div class="item item-4" fxFlex>
        アイテム 4
    </div>
    
    <div class="item item-5" fxFlex="200px">
        アイテム 5
    </div>

</div>

アイテム 1

</div>

アイテム 2

</div>

アイテム 3

</div>

アイテム 4

</div>

アイテム 5

</div>

これにより、 flex-grow: 1, flex-shrink: 1、および flex-basis: 100%がレイアウトに適用されます。幅の値を指定すると、 max-widthプロパティが適用されます。

それでは、 fxFlexOrderと fxFlexOffset を追加してみましょう。:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">

    <div class="item item-1" fxFlex="15%">
    アイテム 1
    </div>

    <div class="item item-2" fxFlex="20%" fxFlexOrder="3">
    アイテム 2
    </div>

    <div class="item item-3" fxFlex>
    アイテム 3
    </div>
</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-4" fxFlex fxFlexOffset="30px" fxFlexOffset.xs="0">
    アイテム 4
    </div>

    <div class="item item-5" fxFlex="200px">
    アイテム 5
    </div>

</div>

アイテム 1

</div>

アイテム 2

</div>

アイテム 3

</div>

アイテム 4

</div>

アイテム 5

</div>

このコードを使用して、 order: 3を2番目のアイテムに適用しました。また、4番目のアイテムの margin-left: 50pxにします。アプリケーションを実行すると、2番目のアイテムが行の3番目の位置に配置され、4番目のアイテムは開始位置から30pxの間隔が空くことがわかります。

まとめ

このチュートリアルでは、AngularアプリにFlex Layoutを実装する方法を学びました。これにより、自分自身でスタイリングをコーディングすることなく、すぐに使えるFlexbox CSSレイアウトを使用できるようになるため、非常に役立ちます。詳細情報が必要な場合は、GitHubページ上のFlex Layout Wikiを参照してください。

このチュートリアルではシンプルにするために、コンポーネントクラスで値をバインドするためのバインディングは使用しませんでした。しかし、コンポーネントクラスの [fxLayout]="レイアウトの方向"では、単方向および双方向のバインディングの両方が可能です。これにより、レイアウト構築の制御性が向上し、動的なユースケースに対応できるようになります。

AngularアプリはランタイムとしてNode.jsを使用します。Node.jsの詳細や、Docker上でNode.jsアプリケーションをデプロイする方法について詳しく知りたい場合は、次のチュートリアルを参照してください：Ubuntu 20.04でDockerを使用してNode.js (Express.js) アプリをデプロイする方法。Angularについてさらに詳しく学ぶには、次のチュートリアルを参照してください： Angular RouterにおけるRouterLink、Navigate、およびNavigateByUrlを使用したナビゲーション.

ハッピーコンピューティング！

Hark Labs

著者 · CloudSigma

Preslav DobrevはCloudSigmaのクリエイティブデザイナーであり、従来型および革新的なマーケティングチャネルを活用した一貫性のあるビジネスアイデンティティに注力しています。彼は芸術的なビジョンと戦略的マーケティングを融合させ、インパクトのあるブランドナラティブを生み出すことに長けています。

AngularでFlex Layoutを実装する：ハウツーガイド

はじめに

前提条件

プロジェクトの構成

Flex Layout の作成

まとめ

Hark Labs

コメント