在 Angular 中實現 Flex 佈局

1. 基於 CSS 的 Flexbox 的問題
2. Angular 中的 Flex 佈局
3. 在 Angular 中實現 Flex 佈局的步驟

本教程將討論並演示如何使用 Angular flex 佈局。

Angular flex layout 是一個 Angular 元件，它實現了基於 flexbox 的響應式佈局系統。它使我們能夠構建在移動裝置和桌面螢幕上響應良好的佈局。

Flexbox 是一種佈局模式，它根據可用空間和原始碼中指定的順序排列容器中的專案，這意味著它會根據螢幕大小自動調整。

這與其他佈局模式（例如網格或絕對定位）不同，其中專案已明確設定位置。

基於 CSS 的 Flexbox 的問題

基於 CSS 的 flexbox 是一種建立佈局的簡單直觀的方法，但是使用這種方法時會出現一些問題。主要問題之一是缺乏對 IE 9、IE 10、Safari 5 和 Opera 12 等舊瀏覽器的支援。

基於 CSS 的 flexbox 的另一個問題是它不適用於響應式設計。這是因為如果不新增額外的程式碼或影象，很難使佈局在不同的螢幕尺寸上看起來不錯。

為 flexbox CSS 生成的 CSS 數量巨大（>250k），如果我們改變佈局方向，我們必須改變子 flexbox 樣式。也不支援自定義媒體查詢斷點。

上述問題已通過使用 angular flex 佈局得到解決。Angular flex 佈局是一個純 TypeScript 的 UI 佈局引擎，它通過 HTML 標記（佈局 API）指定佈局設定。

Angular 中的 Flex 佈局

Angular flex 佈局是 Angular 4.0 版中引入的新佈局引擎。Flex 佈局是 CSS 靈活框佈局模組（或簡稱為 flexbox）的子級。

Flex 佈局允許以更自然和直觀的方式指定如何在容器內佈局內容。這可以通過定義中心軸來完成，它決定了彈性專案在容器中的分佈方式，然後指定一個或多個輔助軸來定義它們相對於其他專案的大小和位置。

使用 Angular flex 佈局的主要優點是：

• 它比其他選項更容易使用；
• 它允許你快速建立響應式設計；
• 它不像 floats 或 inline-block 那樣只侷限於兩個維度；
• 它比 CSS Grid 有更多的選擇。

要使用標準 CSS flexbox 或 CSS 網格建立響應式佈局，我們必須使用媒體查詢編寫複雜的 CSS 程式碼。理解起來也很有挑戰性。

但是，我們可以使用 flexbox 屬性直接在 HTML 模板中使用新的 Angular flexbox 佈局宣告 flexbox 佈局引數。

在 Angular 中實現 Flex 佈局的步驟

Angular flex 佈局使開發人員能夠建立響應式 UI 佈局。它旨在用於瀏覽器並支援移動和桌面環境。

本教程將引導你完成以下步驟：

讓我們使用上面提到的步驟討論一個 Angular flex 佈局示例。

TypeScript 程式碼：

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>

點選這裡檢視上面程式碼的演示。