調整了一下順序

Angular Flex-Layout

Github

簡介

此套件將 FlexBox CSS 包裝成各 Directive 來使用，輔助版面的布局、定位，尤其應用於開發 RWD 網站，非常之實用。

總覽圖

線上Demo：Layout Demos
線上Demo2(stackbliz)：Angular Flexlayouts Sample

安裝

1. 從 package.json 檢查本機是否有安裝，若無使用則輸入指令碼安裝。

   npm i s @angular/flex-layout @angular/cdk
   

2. 去 app.module.ts 設定導入 FlexLayoutModule

   import { FlexLayoutModule } from '@angular/flex-layout';
   @NgModule({
     imports: [
   	FlexLayoutModule
     ],
   })
   

API 分類

Declarative API Overview

應用

1. 容器類 API for DOM containers

• fxLayout
  子元素的排版方向。
  線上範例(stackbliz)

  參數	說明
  row	由左至右、上至下
  column	由上至下、左至右
  row-reverse	row 相反
  column-reverse	column 相反
  wrap	多行

  <div fxLayout="row" fxLayout.xs="column">
    <div><!--紅色--></div>
    <div><!--黃色--></div>
    <div><!--藍色--></div>
  </div>
  

  

• fxLayoutAlign
  子元素的對齊方式。
  線上範例(stackbliz)

  | 平行 | start end center space-around space-between
  | 垂直 | start end center stretch

  <div fxLayoutAlign="center center">
    <div><!--黃色--></div>
  </div>
  

  
  可以看到黃色子元素的位置在：粉色容器的平行中間、垂直中間

• fxLayoutGap
  子元素的間隔距離。

  接受單位	%	px	vw	vh

  <div fxLayoutGap="15px">
    <div><!--子元素--></div>
  </div>
  

2. 子元素類 API for DOM elements

• fxFlex
  子元素的長寬。
  線上範例(stackbliz)
  | 伸展比例 | 壓縮比例 | 基本大小 |
  | <grow> | <shrink> | <basis> |

  接受單位	“”	%	px	vw	vh

  <!-- 範例1 -->
  <div fxLayout="row">
    <div fxFlex>1</div>
    <div fxFlex>2</div>
    <div fxFlex>3</div>
    <div fxFlex>4</div>
  </div>
  

  
  範例1

  ---

  <!-- 範例2 -->
  <div fxLayout="row">
  	<div fxFlex="0 0 40px">1</div>
   	<div fxFlex="0 0 40px">2</div>
   	<div fxFlex="0 0 40px">3</div>
   	<div fxFlex="0 0 40px">4</div>
    <div fxFlex="0 0 40px">5</div>
   	<div fxFlex="0 0 40px">6</div>
  </div>
  

  
  範例2

• fxFlexOffset
  子元素的偏移。

  接受單位	%	px	vw	vh

  <div fxLayout="row">
    <div fxFlexOffset="20px"></div>
  </div>
  

• fxFlexAlign
  同 fxLayoutAlign 用法，此只控制子元素內的對齊方式。
  | start | baseline | center | end |

  <div fxLayout="row">
    <div>...</div>
    <div fxFlexAlign="start">start</div>
    <div>...</div>
  </div>
  

  
  為紅框所指之子元素

3. 特殊響應功能 Special Responsive Features

• 調整非 FlexBox CSS 樣式的API。

  HTML API	接受值	說明

  fxShow | Boolean | 設定顯示條件
  fxHide | Boolean | 設定隱藏條件
  ngClass（1.） | [ngClass]=”{’class名稱’:條件Boolean}” | 樣式設定
  ngStyle（2.） | [ngStyle]=”{’css屬性名稱’:屬性值}” | 樣式設定

  1. ngClass
     Github API 導覽文件

     <div
       [ngClass]="first second" 
       [ngClass.xs]="{'first':false, 'third':true}"
       [ngClass.sm]="{'first':true, 'second':true}" >
          TESTING
     </div>
     

     .first   { font-size: 36px; color:red }
     .second  { background-color: #3a87ad; }
     .third   { background-color: #000; color: yellow; }
     

     

     也可以這樣使用：

     isCheck: Boolean = false;
     

     <!-- isCheck目前為false，所以div不會有first的樣式 -->
     <div [ngClass]="{'first':isCheck"}></div>
     

  2. ngStyle
     Github API 導覽文件

     <!-- 寫法1 -->
     <div [ngStyle]="{'font-size': '16px'}"></div>
     <!-- 寫法2 -->
     <div [ngStyle.md]="font-size: 24px"></div>
     

響應斷點

使用斷點來控制在特定尺寸或設備上調整佈局。

• 預設範圍

  斷點	Media大小範圍(單位：pixel)
  xs	max-width: 599px
  gt-xs	min-width: 600px
  sm	min-width: 600px ~ max-width: 959px
  gt-sm	min-width: 960px
  md	min-width: 960px ~ max-width: 1279px
  gt-md	min-width: 1280px
  lg	min-width: 1280px ~ max-width: 1919px
  gt-lg	min-width: 1920px
  xl	min-width: 1920px

• 自定義範圍
  步驟請參閱 Github導覽文件:Breakpoint

參考來源

Angular Flex-Layout: The Alternative Layout Library for Flex-box and CSS Grid
使用 Angular Flex-Layout 輔助版面布局