Angular에서 Flex 레이아웃 구현

1. CSS 기반 Flexbox의 문제
2. Angular의 Flex 레이아웃
3. Angular에서 Flex 레이아웃을 구현하는 단계

이 튜토리얼에서는 Angular 플렉스 레이아웃을 사용하는 방법을 논의하고 보여줍니다.

Angular flex 레이아웃은 flexbox 기반의 반응형 레이아웃 시스템을 구현하는 Angular 구성 요소입니다. 모바일 장치와 데스크탑 화면에서 잘 반응하는 레이아웃을 만들 수 있습니다.

Flexbox는 사용 가능한 공간과 소스 코드에 지정된 순서에 따라 컨테이너의 항목을 정렬하는 레이아웃 모드입니다. 즉, 화면 크기에 따라 자동으로 조정됩니다.

이는 항목이 명시적으로 위치를 설정하는 그리드 또는 절대 위치 지정과 같은 다른 레이아웃 모드와 다릅니다.

CSS 기반 Flexbox의 문제

CSS 기반 flexbox는 레이아웃을 생성하는 쉽고 직관적인 방법이지만 이 방법을 사용할 때 몇 가지 문제가 발생합니다. 주요 문제 중 하나는 IE 9, IE 10, Safari 5 및 Opera 12와 같은 구형 브라우저에 대한 지원 부족입니다.

CSS 기반 flexbox의 또 다른 문제는 반응형 디자인에서 제대로 작동하지 않는다는 것입니다. 별도의 코드나 이미지를 추가하지 않고는 다양한 화면 크기에서 레이아웃을 보기 좋게 만들기가 어렵기 때문입니다.

flexbox CSS에 대해 생성된 CSS의 양은 엄청나며(>250k) 레이아웃 방향을 변경하면 자식 flexbox 스타일을 변경해야 합니다. 맞춤형 미디어 쿼리 중단점도 지원되지 않습니다.

앞의 문제는 Angular 플렉스 레이아웃을 사용하여 해결되었습니다. Angular flex 레이아웃은 HTML 마크업(Layout API)을 통해 레이아웃 설정을 지정하는 TypeScript 전용 UI 레이아웃 엔진입니다.

Angular의 Flex 레이아웃

Angular flex 레이아웃은 버전 4.0에 도입된 Angular의 새로운 레이아웃 엔진입니다. Flex 레이아웃은 CSS Flexible Box Layout Module(또는 간단히 “flexbox”)의 자식입니다.

Flex 레이아웃을 사용하면 컨테이너 내부의 콘텐츠 레이아웃을 지정하는 보다 자연스럽고 직관적인 방법을 사용할 수 있습니다. 이는 플렉스 항목이 컨테이너에 배포되는 방식을 결정하는 중심 축을 정의한 다음 다른 항목에 대한 상대적인 크기와 위치를 정의하는 하나 이상의 보조 축을 지정하여 수행할 수 있습니다.

Angular 플렉스 레이아웃 사용의 주요 이점은 다음과 같습니다.

• 다른 옵션보다 사용하기 쉽습니다.
• 반응형 디자인을 빠르게 만들 수 있습니다.
• float 또는 inline-block과 같은 2차원에만 국한되지 않습니다.
• CSS 그리드보다 더 많은 옵션이 있습니다.

표준 CSS flexbox 또는 CSS 그리드를 사용하여 반응형 레이아웃을 만들려면 미디어 쿼리를 사용하여 복잡한 CSS 코드를 작성해야 합니다. 또한 이해하기 어렵습니다.

그러나 flexbox 속성을 사용하여 새로운 Angular flexbox 레이아웃이 있는 HTML 템플릿 내에서 직접 flexbox 레이아웃 매개변수를 선언할 수 있습니다.

Angular에서 Flex 레이아웃을 구현하는 단계

Angular 플렉스 레이아웃을 통해 개발자는 반응형 UI 레이아웃을 만들 수 있습니다. 브라우저에서 사용하도록 설계되었으며 모바일 및 데스크탑 환경을 지원합니다.

이 자습서에서는 다음 단계를 안내합니다.

위에서 언급한 단계를 사용하여 Angular 플렉스 레이아웃 예제에 대해 논의해 보겠습니다.

타입스크립트 코드:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent  { }

HTML 코드:

<div fxLayout="column" fxLayoutAlign="center">
<mat-card fxFlex="100">
<div fxLayout="column">
    <div fxFlex="60" class="action-blurb">Home</div>
    <div fxFlex="90" class="action-blurb" fxFlexOffset="20">Contact US</div>
</div>
</mat-card>
</div>

여기를 클릭 위 코드의 라이브 데모를 확인하십시오.