iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 17
2
Modern Web

For 前端小幼苗的圖解筆記系列 第 17

[CSS] Flex 觀念與應用

當一個 div 內包含 多個 div 子物件,因為 div 為 block 塊狀屬性,故預設撐滿整列、並由上往下排列:

.box
    .item 1
    .item 2
    .item 3

透過 Flex 進行彈性排版:


觀念一、父子層:Flexbox & Flex items

1.定義 Flex 物件:display: flex;

  • Flexbox:外容器
  • Flex items:子物件

此時 flex 相關預設屬性為

.box{
    flex-wrap: no-wrap;
    flex-direction: row;
}

2.分清楚 Flex 屬性對應的是 Flexbox / Flex items

定義於 FlexBox (外容器)的

  • flex-wrap:其內容物件是否換行?
  • flex-direction:其內容物的排列方式為?
  • justify-conten:其內容物的主軸向對齊方式
  • align-items:其內容物的次軸向對齊方式
  • align-content:(針對多行的 Flexbox)其內容物的對其方式
    (flex-wrap:no-wrap時無效)

定義於 FlexItems (子物件) 的

  • flex-grow:將該Flexbox的剩餘空間指定給該子物件
  • flex-shrink:當所有子物件總寬度超過容器時,該物件是否收縮?
  • flex-basis:基準值
  • order:指定該子物件排序
  • align-self:個別指定該子物件的對齊方式(跳脫原本 flexbox 的設定)

觀念二、資料流向:主軸&次軸


如上圖排列方式可觀察到,物件為「左至右、上到下」排列。
則這種資料流的排列方式為:

  • 主軸 Main axis:物件排列方向
  • 次軸 Cross axis:物件換行方向

觀念三、屬性定義-Flexbox

1.單行/多行:flex-wrap

  • 子物件超過容器時是否要折行?
  • 換行/不換行/換行且反向
  • flex-wrap:
    • nowrap
    • wrap
    • wrap-reverse

2.子物件排列方式(資料流向)

flex-direction

  • 橫向排(列)/直向排(欄)/橫向排但順序反向/直向排但順序反向
  • flex-direction:
    • row
    • row-reverse
    • column
    • column-reverse

3.子物件對齊方式

  • 靠起點/靠終點/平均分散…等

justify-content

  • 容器內物件主軸對齊方式
  • justify-content:
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    • space-evenly

align-items

  • 容器內物件次軸對齊方式
  • align-items:
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch

align-content

  • 多行時,行間的對齊方式
  • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    • stretch

觀念四、屬性定義-Flex items

1.子物件對齊方式

align-self

  • 個別指定該子物件的對齊方式(跳脫原本 flexbox 的 justify-content 屬性值)

2.子物件伸縮方式

(1)flex-grow

  • 有剩餘空間伸展:伸展為1/N等分
  • 預設值為 0
    N = 該 flexbox 內的所有子物件的 flex-grow 共有幾等分。
  • flex-grow:
    • 1 1/N 個剩餘空間

(2)flex-shrink

  • 空間不足時收縮:壓縮比例
  • flex-shrink:
    • 0 不壓縮
    • 1 壓縮 (預設值)

(3)flex-basis

  • 基準值(預設寬度)
  • flex-basis:
    • 100px

三合一縮寫

  • flex: flex-grow flex-shrink flex-basis;
  • 直接寫 flex: 1 時 = flex-grow: 1

3.自定義子物件順序

order

  • 指定子物件排序數值:數字小排到數字大
  • flex-order:
    • 2
    • -1

參考資料


個人 Blog: https://eudora.cc/


上一篇
[JavaScript] DOM 操作 & 陣列操作 ( forEach / map / reduce / filter / find / some / every )
下一篇
[HTML] 圖解 Table 結構
系列文
For 前端小幼苗的圖解筆記30

尚未有邦友留言

立即登入留言