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

前言

先前介紹格式化上下文(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 box 與 flex container。也就是說 display: flex 的元素本身會參與 BFC 佈局，且會為其內容建立 flex 格式化上下文。

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

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

結語

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

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

參考資源

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