iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 19
1
Modern Web

前端新手村系列 第 19

前端新手村 flex (下)

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻

前言

網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網頁前端技術的關鍵字,成為比較有系統性的視野。

讓一開始接觸網頁前端的新手們,有一個比較友善的系統來架構你的學習,至於技術本身的深入探討,就留給其它的高手們吧。

flex (下)

今天來說說,flex 比較讓人不好懂的部份。

Flexibility[1]

flex 的定義裡盡可能的讓 flex item 的高寬填滿容器

flex 的 CSS 屬性,用來定義 flex item 如何填滿容器。如何伸長分配剩餘空間,如何擠壓自己防止 flex item 超出容器

flex 縮寫語法

語法

flex: 延伸 壓縮 預借空間

flex 裡的三個值,依序如下

  1. 延伸 flex-grow
  2. 壓縮 flex-shrink
  3. 預借空間 flex-basis

預設值 flex: 0 1 auto;

為了符合過去常常見的大部份的情況,所以將縮寫預設值不同於單一屬性預設值。

  • flex: initial = flex: 0 1 auto
  • flex: auto = flex: 1 1 auto
  • flex: none = flex: 0 0 auto;
  • flex: n = flex n 1 0 純以比例決定 flex item 大小

flex 可以搭配 min-widthmin-height 改變壓縮時的幅度。

建議優先使用 flex 而不建議只用各別的 flex-growflex-shrinkflex-basis,因為縮寫預設值較符合一般使用情境

flex-grow

定義 flex grow factor 伸延因數

  • 預設值: 0
  • 值: 負數無效

當容器的「分配空間」是正數時,就使用 flex-grow

flex-shrink

定義 flex grow factor 壓縮因數

  • 預設值: 1
  • 負數無效

當容器的「分配空間」是負數時,就使用 flex-grow

縮小時,flex-shrink × flex-basis
依物品能夠縮小的比例。
目的在於「較大物品明顯減少之前,小物品不會縮到0」

flex-basis

  • 預設值: auto

決定容器的「分配空間」之前,每一個 flex-item 要先佔有的尺寸。
換句話說,是 flex-item 對容器的佔有的寬度,也就是「預借空間」。
有了「預借空間」,才會算出「分配空間」。
「預借空間」可以用「元素寬度」的概念來理解。

width 同時使用時,flex-basis 時,若設定為 flex-basis: auto 才會用 width 計算伸縮大小,否則,會以 flex-basis 計算。

auto0

  • 設定 auto 時,會去找該元素的主要尺寸設定值(height/width)做為基礎,若它們也都是 auto 就用內容尺寸。
  • 設定 0 直接看圖比較實在
    • 上面是設定 0,設定 0,包含內容都當作是剩餘空間。
    • 下面是設定 auto,flex-item 尺寸內容尺寸為準,留白才算剩餘空間。

flex 使用 margin [2]

  • 要避免在 flex item 的 marginpadding 使用百分比,會跨瀏覽器的問題

一般在 flex itemmargin 的排法,寫在排版演算法,但是當 margin: auto ,flex 希望比較像是 block 的排版,所以有下列幾點要注意:

  • 計算 flex-basis 時,margin 會直接當作 0
  • justify-contentalign-self 計算之前,會先分配正數的剩餘空間給該方向的 margin: auto
  • 若擠滿容器,主軸方向的 margin: auto 會忽略,不會超過 flex container。

不管你是不是看得懂這一段在寫什麼。
總之,用 flex item 要注意你是不是用了 margin: auto
flex item 都使用 flex 處理剩餘空間了,就不應該又使用 margin: auto 來分配剩餘空間

參考資料

[1]: 7.1. The flex Shorthand - w3.org
[2]: 8.1. Aligning with auto margins - w3.org


上一篇
前端新手村 flex (上)
下一篇
前端新手村 flex grow & shrink 演算法
系列文
前端新手村30

尚未有邦友留言

立即登入留言