在 JavaScript 中，改變函數內部 this 的指向常見的方式有 call()、apply()、bind()，而這三種方式又存在些微差異。

vertical-align、text-align 甚至 float 都是控制不了 flex items 的，flex 有自己專屬的對齊屬性，而因對齊分為水平對齊與垂直對齊，所以首先要先認清楚誰是主軸(main axis)誰是副軸(cross axis)，才不會精神分裂。

這篇將介紹 flex 屬性，並且深入探討 flex 究竟是如何計算伸縮的比例。

接下來將介紹 flex，從先前 formatting context 的觀念開始，再詳細介紹每個屬性的用法以及 flex box 伸縮的計算方式。

這篇要介紹的是 position，顧名思義，它與元素的位置或定位方式有關，了解它的各種屬性值肯定是必要的，像是常見的彈跳視窗或固定導覽列，也都需要它。

或許你沒聽過 Block Formatting Context，但你肯定有用過！其實在切版時，常常會使用到 BFC，只是你沒有意識到而已，如果能夠有意識的使用 BFC，對於版面的掌控非常有幫助。

每個元素都是一個個的盒子(box)，這些盒子在 in flow 下會如何排列就要看該盒子處在什麼樣的佈局環境，而 formatting context (格式化上下文) 指的就是佈局環境，不同類型的佈局環境會有不同的佈局規則，換句話說，處在不同類型佈局環境裡的盒子，排列方式會有所不同。

Line box 就像筆記本上的線框，一行一行的垂直堆疊，裡面裝著文字或是 inline-level boxes，而我們可以利用 text-align 與 vertical-align 屬性操控 inline-level boxes 在 line box 裡的水平與垂直對齊。

Visual formatting model (視覺格式化模型) 對於排版來說是很重要的觀念，但不是那麼平易近人且有點抽象，在初次看 W3C 規範 時一定是霧煞煞，強烈建議先釐清幾個重要名詞的定義，會發現繞來繞去，講的其實都是相同的概念。

什麼是 Collapsing margins？

先來看一段 W3C 規範 的敘述：

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.