在Angular?中使用?Flex?布局的示例詳解
介紹
Flex Layout 是一個(gè)組件引擎，允許您使用 CSS Flexbox 創(chuàng)建頁面布局，并提供一組指令供您在模板中使用。
該庫是用純 TypeScript 編寫的，因此不需要外部樣式表。它還提供了一種在不同斷點(diǎn)上指定不同指令以創(chuàng)建響應(yīng)式布局的方法。
在本教程中，您將構(gòu)建一個(gè)示例 Angular 應(yīng)用程序，并使用 Flex Layout 來排列項(xiàng)目。
先決條件
要完成本教程，您需要：
- 本地安裝 Node.js，您可以按照《如何安裝 Node.js 并創(chuàng)建本地開發(fā)環(huán)境》進(jìn)行操作。
- 一些設(shè)置 Angular 項(xiàng)目和使用 Angular 組件的基礎(chǔ)知識(shí)可能會(huì)有所幫助。
本教程已使用 Node v14.13.1、npm v6.14.8、angular v10.1.6 和 @angular/flex-layout 進(jìn)行驗(yàn)證。
步驟 1 — 設(shè)置項(xiàng)目
您可以使用 @angular/cli 創(chuàng)建一個(gè)新的 Angular 項(xiàng)目。
在您的終端窗口中，使用以下命令：
npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests
這將配置一個(gè)新的 Angular 項(xiàng)目，樣式設(shè)置為 “CSS”（而不是 “Sass”、“Less” 或 “Stylus”），沒有路由，并且將跳過測試。
導(dǎo)航到新創(chuàng)建的項(xiàng)目目錄：
cd angular-flex-example
從您的項(xiàng)目文件夾中運(yùn)行以下命令以安裝 Flex Layout：
npm install @angular/flex-layout@10.0.0-beta.32
接下來，在您的應(yīng)用程序模塊中導(dǎo)入 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 { }啟動(dòng)項(xiàng)目以驗(yàn)證是否有錯(cuò)誤。
npm start
如果您在 Web 瀏覽器中訪問本地應(yīng)用程序（通常在 localhost:4200），您將看到一個(gè) "angular-flex-example app is running!" 消息。
有了這個(gè)基本結(jié)構(gòu)，您可以在模板中使用 Flex Layout。
步驟 2 — 使用 Flex Layout 進(jìn)行實(shí)驗(yàn)
接下來，您將修改 app.component.html 模板以使用 FlexLayoutModule。
以下是在本教程中使用 Flex Layout 進(jìn)行實(shí)驗(yàn)的最終結(jié)果的示例圖：
!Flex Layout 示例截圖，其中有五個(gè)不同顏色的 div。這些項(xiàng)目占據(jù)兩行。第一行包括項(xiàng)目 1、2 和 3。項(xiàng)目 3 比 1 和 2 更寬，并顯示為第二個(gè)項(xiàng)目。第二行包括項(xiàng)目 4 和 5。項(xiàng)目 4 比項(xiàng)目 5 更寬，并向左偏移。
首先，打開您的代碼編輯器中的 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 并用兩個(gè)容器 div 和五個(gè)內(nèi)部項(xiàng)目 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>重新編譯后，在 Web 瀏覽器中訪問您的應(yīng)用程序?，F(xiàn)在您將看到五個(gè) 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>此代碼將在容器 div 上應(yīng)用 display: flex 和 flex-direction: row 樣式。
重新編譯后，在 Web 瀏覽器中訪問您的應(yīng)用程序，您將看到三個(gè) div 共享頂部行，以及兩個(gè) 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 上應(yīng)用 place-content: stretch center 和 align-items: stretch 樣式。它還將在 flex 項(xiàng)目之間應(yīng)用 10px 的間距。
接下來，使用響應(yīng)式后綴在特定斷點(diǎn)上更改 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（額外小）屏幕尺寸上設(shè)置斷點(diǎn)。它將把布局從默認(rèn)的 "row" 更改為 "column"，并將間距大小從 "10px" 更改為 "0"。
重新編譯后，在 Web 瀏覽器中訪問您的應(yīng)用程序。調(diào)整瀏覽器窗口大小至 xs 斷點(diǎn)（寬度小于 599px），觀察樣式的變化。
各種屏幕尺寸的斷點(diǎn)別名可用：
sm- 小md- 中lg- 大xl- 額外大
還有可以添加到子元素的指令。
接下來，添加 fxFlex：
<div class="container"
fxLayout
fxLayoutAlign="center"
fxLayoutGap="10px"
>
<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"
>
<div class="item item-4"
fxFlex
>
Item 4
</div>
<div class="item item-5"
fxFlex="200px"
>
Item 5
</div>
</div>此代碼將應(yīng)用 flex-grow: 1、flex-shrink: 1 和 flex-basis: 100%。通過指定寬度值，它將應(yīng)用 max-width 屬性。
接下來，添加 fxFlexOrder 和 fxFlexOffset：
<div class="container"
fxLayout
fxLayoutAlign="center"
fxLayoutGap="10px"
>
<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"
>
<div class="item item-4"
fxFlex
fxFlexOffset="50px"
>
Item 4
</div>
<div class="item item-5"
fxFlex="200px"
>
Item 5
</div>
</div>此代碼將在第二個(gè)項(xiàng)目上應(yīng)用 order: 3。它還將在第四個(gè)項(xiàng)目上應(yīng)用 margin-left: 50px。
重新編譯后，在 Web 瀏覽器中訪問您的應(yīng)用程序，您將注意到第二個(gè)項(xiàng)目位于行的第三個(gè)位置，并且第四個(gè)項(xiàng)目距離 flexbox 起始位置有 50px 的間距。
這就是對(duì) Flex Layout 進(jìn)行簡要實(shí)驗(yàn)的全部內(nèi)容。
結(jié)論
在本教程中，您使用 Flex 布局與 Angular 應(yīng)用程序。它允許您構(gòu)建一個(gè)布局，使用預(yù)配置的 Flexbox CSS 樣式，而無需額外的樣式。
您可以參考 API 概述，以更深入地了解可用的指令。
在本例中，您硬編碼了指令的值。也可以使用數(shù)據(jù)綁定來綁定到組件類中的值（例如，[fxLayout]="direction"）。這將允許您創(chuàng)建用戶可以控制和更改的高度動(dòng)態(tài)的布局。
Flex 布局還可以與 Angular Material 結(jié)合使用，用于 Material Design 組件。
到此這篇關(guān)于在Angular 中使用 Flex 布局的示例詳解的文章就介紹到這了,更多相關(guān)Angular使用 Flex 布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Angular實(shí)現(xiàn)的日程表功能【可添加及隱藏顯示內(nèi)容】
這篇文章主要介紹了Angular實(shí)現(xiàn)的日程表功能,帶有向日程表中添加內(nèi)容及隱藏顯示內(nèi)容的功能,涉及AngularJS事件響應(yīng)及頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12
詳解AngularJS通過ocLazyLoad實(shí)現(xiàn)動(dòng)態(tài)（懶）加載模塊和依賴
本篇文章主要介紹了詳解AngularJS通過ocLazyLoad實(shí)現(xiàn)動(dòng)態(tài)（懶）加載模塊和依賴 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
AngularJS實(shí)現(xiàn)頁面定時(shí)刷新
本篇文章主要介紹了AngularJS實(shí)現(xiàn)頁面定時(shí)刷新，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
下面小編就為大家?guī)硪黄獪\談angularjs中響應(yīng)回車事件。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
本篇文章主要介紹了angularjs+bootstrap菜單的使用示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了AngularJS讀取JSON及XML文件的方法,涉及AngularJS針對(duì)xml及json格式文件數(shù)據(jù)的讀取、遍歷、輸出等相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
Angular 2應(yīng)用的8個(gè)主要構(gòu)造塊有哪些
這篇文章主要為大家詳細(xì)介紹了Angular 2應(yīng)用的8個(gè)主要構(gòu)造塊,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
angular項(xiàng)目中bootstrap-datetimepicker時(shí)間插件的使用示例
這篇文章主要介紹了angular項(xiàng)目中bootstrap-datetimepicker時(shí)間插件的使用示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
不能不知道的10個(gè)angularjs英文學(xué)習(xí)網(wǎng)站
這篇文章主要為大家分享了10個(gè)大家不能不知道的angularjs英文網(wǎng)站，供大家學(xué)習(xí)，感興趣的小伙伴們可以參考一下2016-03-03
Angular 1.x個(gè)人使用的經(jīng)驗(yàn)小結(jié)
這篇文章主要給大家介紹了關(guān)于Angular 1.x個(gè)人使用的一些經(jīng)驗(yàn)，屬于一些基礎(chǔ)入門教程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07