flexbox布局 Flexbox 布局實際用例

上篇文章介紹了 flexbox 的屬性與示例，本文再通過幾個 flex 布局的案例來體會 flex 布局的特性帶來的便利和問題~

當我們給父容器設定 flex 屬性後，flex 容器會在容器內建立乙個新的flex 格式化上下文(formatting context)。在這上下文中float、clear將失去作用，vertical-align對於 flex 元素也不再會起作用。

在實際開發中，當我們使用行內元素(inline、inline-block) 時，有時候可能會看到元素之間會有乙個奇怪的間隙，並且設定的字型越大間隙就越大。原來這個間隙是我們在編寫源**時標籤換行導致，不換行就不會出現這種情況。

多數情況下，我們在編寫**時會習慣用編輯器對**進行格式化，格式化後會使這些標籤換行從而導致間隙。這在要求畫素級還原的專案中就有點尷尬了。

以前常見的做法是在父元素設定font-size: 0消除間隙，再設定子元素的字型大小。這樣做確實有點麻煩，因此在 flex 上下文中，這些間隙預設就會被清除。

[codepen] 本例 demo

通常我們使用flex布局更多的是用於整體的布局設計，如:

大屏布局

小屏布局

[codepen] 本例 demo: flex 聖杯布局

在網際網路早期，由於使用者網路的限制，經常會出現html的內容顯示出來但頁面樣式還沒載入出來的情況，這會導致使用者沒能最先看到想看的東西。因此 matthew levine 在 2006 年提出了聖杯布局的概念，在html源**中將使用者想看的內容挪到次要內容的前面。

上例 demo 就是使用 flex 布局實現的聖杯布局，雖然在html原始碼裡main處於其他兩塊內容之上，但通過order屬性可以調整元素間的順序。

除此之外，還可以通過**查詢(@media)做響應式頁面，當螢幕寬度小於640px後僅需修改幾項 flex 屬性就可以改變布局排列的方式，十分靈活。

如果你使用過react/vue主流 ui 庫的話，你就會發現他們使用布局容器也是flex布局實現的，比如 element ui、ant design 等。

柵格布局也可以通過 flex 來實現：在以下的 demo 中，html原始碼內的各元素都是平級，通過調整 flex 屬性實現了跨行或跨列的效果。

柵格布局

[codepen] flex 柵格布局

讓css flex布局最後一行列表左對齊的n種方法 --by 張鑫旭

多數情況下使用justify-content是要求子元素們散開，但尾列元素不夠的時候，散開就顯得很奇怪了，為此我們可以做如下處理:

[codepen] flex 解決 justify-content 尾部不整齊的問題

在 mdn animatable css properties 上列出了可以使用animations或transitions進行動畫處理的屬性，其中就有flex屬性。因此還可以結合動畫進行布局設計:

由於知乎不支援插入 codepen，同時不允許上傳超過 10m 的，因此動畫效果只能去 demo 上進行嘗試~

[codepen] flex 與 transition

參考資料:

pixiv 背景圖例：

ちょけ | アリスミクと白うさぎ

azit | miku

ぽむ | もっと高くまで！

雨陌 | 8.31

akino | つもりつもるキモチ。

原文出自: flexbox 布局實際用例 | anran758's blog