Angular에 Flex 레이아웃을 사용하는 방법

소개

Flex 레이아웃은 템플릿에서 사용할 수 있는 일련의 지시문과 함께 CSS Flexbox를 사용하여 페이지 레이아웃을 생성할 수 있는 구성 요소 엔진입니다.

라이브러리는 순수한 TypeScript로 작성되었으므로 외부 스타일시트가 필요하지 않습니다. 또한 반응형 레이아웃을 생성하기 위해 다양한 중단점에서 다양한 지시문을 지정하는 방법을 제공합니다.

이 자습서에서는 예제 Angular 애플리케이션을 빌드하고 Flex 레이아웃을 사용하여 항목을 정렬합니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

Node.js를 로컬에 설치했습니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법에 따라 수행할 수 있습니다.
Angular 구성 요소 사용에 어느 정도 익숙하면 도움이 될 수 있습니다.

이 튜토리얼은 Node v14.13.1, npm v6.14.8, angular v10.1.6 및 @angular/flex-layout에서 검증되었습니다.

1단계 - 프로젝트 설정

@angular/cli를 사용하여 새 Angular 프로젝트를 만들 수 있습니다.

터미널 창에서 다음 명령을 사용합니다.

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

이렇게 하면 스타일이 "CSS\("Sass\, "Less\ 또는 "Stylus\와 반대)로 설정된 새 Angular 프로젝트가 구성되고 라우팅이 없으며 테스트를 건너뜁니다.

새로 생성된 프로젝트 디렉토리로 이동합니다.

cd angular-flex-example

프로젝트 폴더에서 다음 명령을 실행하여 Flex Layout을 설치합니다.

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

오류가 없는지 확인하려면 프로젝트를 시작하십시오.

npm start

웹 브라우저에서 로컬 앱(일반적으로 localhost:4200)을 방문하면 \angular-flex-example app is running!\ 메시지가 표시됩니다.

이 스캐폴딩을 설정하면 템플릿에서 Flex 레이아웃을 사용할 수 있습니다.

2단계 — Flex 레이아웃 실험

다음으로 FlexLayoutModule을 사용하도록 app.component.html 템플릿을 수정합니다.

다음은 이 튜토리얼에서 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;
}

그런 다음 코드 편집기에서 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>

다시 컴파일한 후 웹 브라우저에서 애플리케이션을 방문하십시오. 이제 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>

이 코드는 display: flex 및 flex-direction: row 스타일을 컨테이너 div에 적용합니다.

다시 컴파일한 후 웹 브라우저에서 애플리케이션을 방문하면 맨 위 행을 공유하는 세 개의 div와 맨 아래 행을 공유하는 두 개의 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>

이 코드는 컨테이너 div에 place-content: stretch center 및 align-items: stretch 스타일을 적용합니다. 또한 플렉스 항목 사이에 10px의 공간을 적용합니다.

참고: 버전 10.0.0-beta.32에서 fxLayoutGap은 CSS 속성 gap을 사용하는 대신 CSS 속성 margin을 사용합니다.

다음으로 반응형 접미사를 사용하여 특정 중단점에서 flexbox 스타일을 변경합니다.

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

이 코드는 xs(초소형) 화면 크기에서 중단점을 설정합니다. 기본 \row\에서 \column\으로 레이아웃을 변경하고 간격 크기를 \10px\에서 \0으로 변경합니다. .

다시 컴파일한 후 웹 브라우저에서 애플리케이션을 방문하십시오. 브라우저 창의 크기를 xs 중단점(너비 599px 미만)으로 조정하고 스타일이 변경되는지 관찰합니다.

중단점 별칭은 다양한 화면 크기에서 사용할 수 있습니다.

sm - 작음
md - 중간
lg - 대형
xl - 초대형

자식 요소에 추가할 수 있는 지시문도 있습니다.

다음으로 fxFlex를 추가합니다.

<div class="container"
     fxLayout
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-1"
       fxFlex="15%"
  >
    Item 1
  </div>
  <div class="item item-2"
       fxFlex="20%"
  >
    Item 2
  </div>
  <div class="item item-3"
       fxFlex
  >
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-4"
       fxFlex
  >
    Item 4
  </div>
  <div class="item item-5"
       fxFlex="200px"
  >
    Item 5
  </div>
</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%"
  >
    Item 1
  </div>
  <div class="item item-2"
       fxFlex="20%"
       fxFlexOrder="3"
  >
    Item 2
  </div>
  <div class="item item-3"
       fxFlex
  >
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-4"
       fxFlex
       fxFlexOffset="50px"
       fxFlexOffset.xs="0"
  >
    Item 4
  </div>
  <div class="item item-5"
       fxFlex="200px"
  >
    Item 5
  </div>
</div>

이 코드는 order: 3을 두 번째 항목에 적용합니다. 네 번째 항목에도 margin-left: 50px를 적용합니다.

다시 컴파일한 후 웹 브라우저에서 애플리케이션을 방문하면 두 번째 항목이 행의 세 번째 위치에 있고 네 번째 항목이 가변 상자 시작부터 50px 간격을 두고 있음을 알 수 있습니다.

이것으로 Flex Layout에 대한 간단한 실험을 마칩니다.

결론

이 자습서에서는 Angular 애플리케이션과 함께 Flex 레이아웃을 사용했습니다. 추가 스타일 지정 없이 미리 구성된 Flexbox CSS 스타일을 사용하여 레이아웃을 빌드할 수 있습니다.

사용 가능한 지시문에 대한 자세한 내용은 API 개요를 참조할 수 있습니다.

이 예에서는 지시문 값을 하드 코딩했습니다. 데이터 바인딩을 사용하여 구성 요소 클래스의 값에 바인딩하는 것도 가능합니다(예: [fxLayout]=\direction\). 이를 통해 사용자가 제어하고 변경할 수 있는 매우 동적인 레이아웃을 만들 수 있습니다.

Flex Layout은 Material Design 구성 요소용 Angular Material과 함께 사용할 수도 있습니다.