PrimeFlex 簡介

PrimeFlex 介紹與安裝

PrimeFlex 是一套輕量級、響應式的CSS工具集，專為快速開發和靈活佈局設計。它包含了Flexbox、Grid系統和其他實用的CSS類別。

安裝（Installation）

安裝PrimeFlex很簡單，只需使用npm命令：

npm install primeflex

安裝後，將其引入到您的Angular項目中：

// 在您的主要CSS檔案中
@import 'primeflex/primeflex.css';

Flexbox 佈局基礎

Flexbox是一種CSS佈局模式，提供了一種更有效的方式來排列、對齊和分散容器內的項目，即使它們的大小未知或動態變化。

基本概念

• 容器（Container）: 使用 display: flex; 來定義Flex容器。
• 項目（Items）: 容器內的子元素自動成為Flex項目。

範例

.container {
  display: flex;
}

.item {
  flex: 1; /* 項目平均分配空間 */
}

使用 Grid 系統建立響應式佈局

Grid系統是一種通過使用行（rows）和列（columns）來創建頁面佈局的方法，非常適合建立複雜的響應式佈局。

使用PrimeFlex Grid

PrimeFlex提供了一系列的Grid類別用於創建佈局。例如：

<div class="grid">
  <div class="col-12 md:col-6 lg:col-4">...</div>
  <div class="col-12 md:col-6 lg:col-4">...</div>
  <div class="col-12 md:col-6 lg:col-4">...</div>
</div>

這個例子中，我們建立了一個3列的佈局，每列在不同的螢幕尺寸下有不同的寬度。

實作：建立基本佈局

讓我們來實際建立一個簡單的佈局結構，使用Flexbox和Grid。

Angular組件範例

import { Component } from '@angular/core';

@Component({
  selector: 'my-layout',
  template: `
    <div class="grid">
      <div class="col-12 md:col-6 lg:col-3">Sidebar</div>
      <div class="col-12 md:col-6 lg:col-9">Content</div>
    </div>
  `,
  styles: [`
    .grid {
      /* 添加您的樣式 */
    }
  `]
})
export class MyLayoutComponent {}

在這個範例中，我們創建了一個包含側邊欄和內容區的佈局，並使用PrimeFlex的Grid類別來實現響應式設計。