iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
1

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


前言

先前介紹格式化上下文(formatting context)時,曾說到 container box 會為其內容建立格式化上下文,例如 grid container 會建立 grid 格式化上下文、block container 可以同時建立 block 格式化上下文(BFC)與 inline 格式化上下文(IFC)等,而會產生何種 container box,則取決於 display 屬性。

而在介紹盒子生成(box generation)時,也提過 block-level element 本身會參與 BFC 佈局,而 inline-level element 本身會參與 IFC 佈局。

這些觀念接下來將非常的好用!今天先來介紹一下 display: flex 屬性值的意義~


display: flex | inline-flex

flex container 顧名思義就是一個容器,描述 flex 元素與其後裔元素之間的關係,當對一個元素設定 display: flex 時,將此元素稱為 flex container,而其直接子元素就稱為 flex item



在看規範時,可一邊搭配下方的 display 表服用,好用!

摘自 MDN

  • flex
    This value causes an element to generate a flex container box that is block-level when placed in flow layout.

  • inline-flex
    This value causes an element to generate a flex container box that is inline-level when placed in flow layout.

display: flex 的元素屬於 block-level element,會生成 block-level boxflex container。也就是說 display: flex 的元素本身參與 BFC 佈局,且會為其內容建立 flex 格式化上下文

display: inline-flex 的元素屬於 inline-levle element,會生成 inline-level boxflex container。也就是說 display: inline-flex 的元素本身參與 IFC 佈局,且會為其內容建立 flex 格式化上下文


註: 格式化上下文是一種「佈局環境」,可參考先前文章。




結語

之前覺得 flex 好上手又好用,也沒想過要看規範,今天的心得大概是......視覺格式化模型真的很重要啊,許多觀念都是重疊互通的!

今天先這樣囉,看多少寫多少哈哈,明天繼續看新內容再分享~
掰囉!



參考資源

W3C-Flexible Box Layout Module Level 1
W3C-Box Layout Modes: the display property


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

尚未有邦友留言

立即登入留言