这一次距上一次相隔了相当长的时间，但我打算引入flex-layout并尝试实现响应式设计。

请参阅官方的更新指南，了解由Angular 9升级至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。

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

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

修改首页

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的用法。

让我示范一下

电脑版显示

请以手机版显示

最后

这次我们使用了flex-layout来实现响应式布局。
虽然只使用了简单的方法，但仅凭这一点就能在电脑/移动设备上分别展示，非常方便。