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과 함께 사용할 수도 있습니다.