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 屬性實現了跨行或跨列的效果。

柵格佈局也能夠經過 flex 來實現：在如下的 demo 中，HTML 源碼內的各元素都是平級，經過調整 flex 屬性實現了跨行或跨列的效果。

[codepen] flex 柵格佈局

justify-content 尾列不整齊

讓CSS flex佈局最後一行列表左對齊的N種方法 --By 張鑫旭

多數狀況下使用 justify-content 是要求子元素們散開，但尾列元素不夠的時候，散開就顯得很奇怪了，爲此咱們能夠作以下處理:

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

動畫

在 MDN Animatable CSS properties 上列出了可使用 Animations 或 Transitions 進行動畫處理的屬性，其中就有 flex 屬性。所以還能夠結合動畫進行佈局設計:

因爲平臺不支持插入 codepen，同時不容許上傳超過 10M 的圖片(雖然有錄 GIF)，所以動畫效果只能去 demo 上進行嘗試~

結束

經過以上幾個案例是否是對 flex 佈局的靈活有了更深的感覺呢？以上 demo 大多借鑑已有的思路，若是你有什麼好的想法，也能夠本身動手嘗試一番或分享出來~

參考資料:

• MDN | 使用 CSS 彈性盒子
• 一絲 | 如下 CSS 柵格佈局除了用 table 之外，有什麼其餘的方法嗎？
• 張鑫旭 | 讓 CSS flex佈局最後一行列表左對齊的N種方法

Pixiv 背景圖例：

1. ちょけ | アリスミクと白うさぎ
2. Azit | Miku
3. ぽむ | もっと高くまで！
4. 雨陌 | 8.31
5. akino | つもりつもるキモチ。

原文出自: Flexbox 佈局實際用例 | anran758's blog

---

目前鴿子羣彙集了前端、java、Python 等不一樣語言的博主，你們大多都有寫博客的習慣。歡迎對 web 領域感興趣，或者有在寫博客的同窗加入談論~