iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1
自我挑戰組

前端新手進化史系列 第 25

flex 3

文章將陸續整理並更新至個人部落格


上一篇文章中介紹了 flex-direction 以及主軸(main axis)與副軸(cross axis)的概念,今天將介紹 flex-wrap、flex-flow 與 order 三個屬性。


flex-wrap 屬性

flex-wrap 屬性適用於 flex container,有 nowrapwrapwrap-reverse 三種屬性值。接下來分別說明三種屬性值的意義。

摘自 W3C

註:display 為 flex 或 inline-flex 元素為 flex container,而其子元素稱為 flex item。


nowrap

flex-wrap: nowrap;
  • 預設值,單行,不換行



wrap

flex-wrap: wrap;
  • 可換行,由 cross start 開始向 cross end 堆疊。


wrap-reverse

flex-wrap: wrap-reverse;
  • 可換行,由 cross end 開始向 cross start 堆疊。


flex-flow 屬性

flex-direction 屬性與 flex-wrap 屬性的縮寫

例 1

flex-flow: row wrap;

上式等同於

flex-direction: row;   /* 預設值 */
flex-wrap: wrap;


例 2

flex-flow: row-reverse wrap-reverse;

上式等同於

flex-direction: row-reverse;
flex-wrap: wrap-reverse;


order 屬性

order 屬性可以控制 flex items順序,僅適用於 flex items,屬性值須為整數(可為負數)

摘自 W3C

註: flex items 的 order 預設下皆為 0

flex items 會從序號最小的開始排序,直接看圖比較快~
例如在書寫方向為橫式由左至右的前提下,

若主軸(main axis)為 row,即 flex-direction: row 的 flex container,其子元素(flex items)的排列順序會依照其 order 序號由左至右排序。

  • 1 < 3 < 4


  • -5 < -2 < 4 < 8


若主軸(main axis)為 column,即 flex-direction: column 的 flex container,其子元素(flex items)的排列順序會依照其 order 序號由上至下排序。

  • 1 < 3 < 4


  • -10 < 4 < 7 < 13




今天就先簡單介紹 flex-wrap、flex-flow 與 order 三個屬性~
明天見拉,bye~


還在持續看 flex 規範中~ 或許看完之後會再重新整理一次文章~


參考資料

W3C-CSS Flexible Box Layout Module Level 1


上一篇
flex 2
下一篇
flex 4
系列文
前端新手進化史30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言