Angular で Flex レイアウトを実装する

1. CSS ベースの Flexbox の問題
2. Angular の Flex レイアウト
3. Angular で Flex レイアウトを実装する手順

このチュートリアルでは、Angular フレックスレイアウトの使用方法について説明し、デモンストレーションを行います。

Angular フレックスレイアウトは、フレックスボックスベースのレスポンシブレイアウトシステムを実装する Angular コンポーネントです。これにより、モバイルデバイスやデスクトップ画面で適切に応答するレイアウトを構築できます。

Flexbox は、使用可能なスペースとソースコードで指定された順序に従ってコンテナ内のアイテムを配置するレイアウトモードです。つまり、画面のサイズに応じて自動的に調整されます。

これは、アイテムが明示的に位置を設定するグリッドや絶対位置などの他のレイアウトモードとは異なります。

CSS ベースの Flexbox の問題

CSS ベースのフレックスボックスはレイアウトを作成するための簡単で直感的な方法ですが、この方法を使用するといくつかの問題が発生します。主な問題の 1つは、IE 9、IE 10、Safari 5、Opera12 などの古いブラウザーがサポートされていないことです。

CSS ベースのフレックスボックスのもう 1つの問題は、レスポンシブデザインではうまく機能しないことです。これは、余分なコードや画像を追加せずに、さまざまな画面サイズでレイアウトを美しく見せることが難しいためです。

フレックスボックス CSS 用に生成される CSS の量は膨大で（> 250k）、レイアウトの方向を変更する場合は、子フレックスボックスのスタイルを変更する必要があります。カスタマイズされたメディアクエリブレークポイントもサポートされていません。

前述の問題は、Angular フレックスレイアウトを使用して対処されました。Angular flex layout は、HTML マークアップ（Layout API）を介してレイアウト設定を指定する TypeScript のみの UI レイアウトエンジンです。

Angular の Flex レイアウト

Angular フレックスレイアウトは、バージョン 4.0 で導入された Angular の新しいレイアウトエンジンです。フレックスレイアウトは、CSS フレキシブルボックスレイアウトモジュール（または単にフレックスボックス）の子です。

Flex レイアウトを使用すると、コンテナ内のコンテンツのレイアウト方法をより自然で直感的に指定できます。これは、フレックスアイテムがコンテナ内でどのように分散されるかを決定する中心軸を定義し、次に他のアイテムに対するサイズと位置を定義する 1つ以上のセカンダリ軸を指定することで実行できます。

Angular フレックスレイアウトを使用する主な利点は次のとおりです。

• 他のオプションよりも使いやすいです。
• レスポンシブデザインをすばやく作成できます。
• フロートやインラインブロックのような 2 次元だけに限定されません。
• CSS グリッドよりも多くのオプションがあります。

標準の CSS フレックスボックスまたは CSS グリッドを使用してレスポンシブレイアウトを作成するには、メディアクエリを使用して複雑な CSS コードを作成する必要があります。理解するのも難しいです。

ただし、フレックスボックス属性を使用して、新しい Angular フレックスボックスレイアウトを使用して HTML テンプレート内でフレックスボックスレイアウトパラメーターを直接宣言できます。

Angular で Flex レイアウトを実装する手順

Angular Flex レイアウトにより、開発者は応答性の高い UI レイアウトを作成できます。ブラウザで使用するように設計されており、モバイルおよびデスクトップ環境をサポートします。

チュートリアルでは、次の手順を説明します。

上記の手順を使用して、Angular フレックスレイアウトの例について説明しましょう。

TypeScript コード：

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent  { }

HTML コード：

<div fxLayout="column" fxLayoutAlign="center">
<mat-card fxFlex="100">
<div fxLayout="column">
    <div fxFlex="60" class="action-blurb">Home</div>
    <div fxFlex="90" class="action-blurb" fxFlexOffset="20">Contact US</div>
</div>
</mat-card>
</div>

ここをクリックして、上記のコードのライブデモを確認してください。