Angular１０ とFirebaseでブログを作ってみる１０ （flex-layoutでレスポンシブ対応してみる）

4858 ワード
Angular flexbox Angular テキストリンク

前回からかなり間が空いてしまいましたが、今回はflex-layoutを導入してレスポンシブ対応してみようと思います。

※Angular10にアップデートしたため、タイトル変わってます
　Angular9 => 10のアップデートについて公式のアップデートガイドをご覧ください

Angularバージョン

> ng "version"


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 10.0.8
Node: 12.16.3
OS: darwin x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cdk                      10.2.0
@angular/cli                      10.0.8
@angular/fire                     5.3.0
@angular/flex-layout              10.0.0-beta.32
@angular/material                 10.2.0
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.4
typescript                        3.9.7
webpack                           4.43.0

※Angular10にバージョンアップしてます

インストール

  • 公式通りインストールします
npm i -s @angular/flex-layout

FlexLayoutModuleのインポート

src/app/app.module.ts
import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  ・・・
  imports: [
    ・・・
    FlexLayoutModule,

TOPページをいじる

  • fxLayoutをフレックスレイアウトを適用する要素に付与します
    • 基本は横並びとするためrowを指定します
    • その子要素にfxFlexで割合をセットします
      • 今回はニュースを70%で表示するため、fxFlex="70"とします
  • モバイル表示時は全て縦並びになるようにfxLayout.lt-sm="column"を設定します
<div fxLayout="row" fxLayout.lt-sm="column">
  <div class="contents news" fxFlex="70">
    <app-top-news></app-top-news>

    <div class="qiita">
      <app-top-qiita></app-top-qiita>
    </div>
  </div>
  <div class="contents twitter" fxFlex>
    <app-top-twitter></app-top-twitter>
  </div>
</div>

※fxFlexの使い方はこちらを参照

表示してみる

PC版表示

モバイル版表示


最後に

今回はflex-layoutを使って、レスポンシブ対応させました。
簡単な使い方しかしてませんが、これだけでもPC／モバイルで表示を切り分けられるので便利ですね。