지난번 로부터 꽤 사이가 비어 버렸습니다만, 이번은 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/모바일로 표시를 나눌 수 있으므로 편리하네요.