iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 24
2

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


先前介紹格式化上下文(formatting context)時,曾說到 container box 會為其內容建立格式化上下文,而 display: flex 的元素會為其內容建立 flex formatting contex,其處在這佈局環境中的子元素,皆會遵照它的佈局規則。



flex container

  • display 為 flexinline-flex 的元素。

  • flex container 會建立 flex formatting contex(FFC),所以:

    • 此元素不會與 float 元素重疊。

    • 此元素不會與其元素(flex item)發生 margin collapsing。

  • column-* 屬性適用。


flex item

display 為 flex 或 inline-flex 元素的元素稱為 flex item

  • 建立 block formatting contex(BFC),所以 flex items 之間不會發生 margin collapsing

  • 參與 flex formatting contex(FFC)。

  • vertical-align 適用。

  • float 與 clear 適用。

  • 即使 flex item 是 display: inline 的元素,仍然可以透過 widthheight 屬性調整寬高。因 flex item 是 blockified

註:
建立 formatting contex 是為後裔元素建立一個佈局環境;
參與 formatting contex 是元素本身處在何種佈局環境


主軸(main axis)與副軸(cross axis)

flex items 可以透過 flex-direction 屬性來決定排列方向,flex-direction 同時也會決定主軸(main axis)副軸(cross axis)

摘自W3C

flex-direction 共有四個屬性值,會受到書寫方向 writing-mode 影響。


橫向由左至右的書寫方式來說,此時 row 為橫向,column 為直向。

flex-direction: row

  • 主軸為 row 方向。
  • 副軸為 column 方向。
  • main startmain end 排列。

flex-direction: row-reverse

  • 主軸為 row 方向。
  • 副軸為 column 方向。
  • main endmain start 排列。

flex-direction: column

  • 主軸為 column 方向。
  • 副軸為 row 方向。
  • main startmain end 排列。

flex-direction:column-reverse

  • 主軸為 column 方向。
  • 副軸為 row 方向。
  • main endmain start 排列。


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



參考資料

W3C-Flexible Box Layout
W3C-Automatic Box Type Transformations


上一篇
flex 1
下一篇
flex 3
系列文
前端新手進化史30

尚未有邦友留言

立即登入留言