flexbox CSS 레이아웃을 사용하여 사용 가능한 공간에 따라 HTML DOM 요소의 너비와 높이를 변경할 수 있습니다.
다른 종류의 디스플레이 장치와 다른 화면 크기에 대해 다른 종류의 레이아웃을 정의할 수 있습니다.
이 비디오에서는 앵귤러 머티리얼과 앵귤러 플렉스 레이아웃을 사용하여 반응형 레이아웃을 디자인하는 방법을 보여 드리겠습니다.
소스 코드( GitHub 링크 ): https://github.com/Tariqu/flex-tutorial
플렉스 레이아웃 문서 링크: https://github.com/angular/flex-layout
Angular Material UI 문서: http://material.angular.io/
Angular Flex Layout은 Flexbox CSS + mediaQuery를 사용하여 정교한 레이아웃 API를 제공합니다. 이 모듈은 Angular 개발자에게 맞춤 레이아웃 API, mediaQuery 관찰 가능 항목 및 삽입된 DOM flexbox-2016 CSS 스타일을 사용하는 구성 요소 레이아웃 기능을 제공합니다.
Flex Layout 엔진은 적절한 Flexbox CSS를 브라우저 보기 계층 구조에 적용하는 프로세스를 지능적으로 자동화합니다. 이 자동화는 또한 기존의 수동 CSS 전용 box CSS 응용 프로그램에서 발생하는 많은 복잡성과 해결 방법을 해결합니다.
우버 클론 소스 코드
그러나 Flex Layout의 진정한 힘은 반응형 엔진입니다. Responsive API를 사용하면 개발자가 다양한 뷰포트 크기 및 디스플레이 장치에 대해 다양한 레이아웃, 크기, 가시성을 쉽게 지정할 수 있습니다.
시작하기
npm에서 Angular Layout 라이브러리를 설치하여 시작합니다.
npm i -s @angular/flex-layout @angular/cdk
다음으로 앱의 모듈에서 레이아웃 모듈을 가져와야 합니다.
app.module.ts
'@angular/flex-layout'에서 { FlexLayoutModule } 가져오기;
...
@NgModule({
...
가져오기: [ FlexLayoutModule ],
...
});
구성한 후에는 플렉스 레이아웃을 위해 HTML 태그에서 Angular 레이아웃 속성을 사용할 수 있습니다.
#각도 #각도 9 #html
www.youtube.com
Angular 9 Flex 레이아웃 FxLayout 및 Angular Material 시작하기
flexbox CSS 레이아웃을 사용하여 사용 가능한 공간에 따라 HTML DOM 요소의 너비와 높이를 변경할 수 있습니다.