CSS3 的新排版方式，flexbox (目前在IE上好像還是有不少 bug…)
利用 flexbox 可以解決我們傳統排版方式遇到的許多問題。
在這篇文章中，我就不介紹 flexbox 的用法與屬性了(flexbox教學的文章網路上很多，google後應該一堆)
但我還蠻推薦這個網站: http://flexboxfroggy.com/
花不到一個小時就可以很快上手 flexbox 排版囉!
接下來，我會簡單比較幾個複雜的案例，使用 flexbox 排版與傳統排版的差異
-
還記得以前在不同情況時的各種置中方法嗎? 在 flexbox 版面配置中一切都變得很容易，只要利用 justify-content 與 align-items 就可以輕易達成
-
選單的導覽列，我們時常使用 inline-block 去做選單的每個選項，針對選項的數量去制定寬度如( 33%、25%等)，這樣日後增加選項時我們還需要去更改 CSS 的寬度設定 但在 flexbox 版面時，我們可以讓裡面的 item 自動分配寬度 如：
-
在寫多欄式的版面時，可能每欄的高度不同，若要使所有欄與最高欄的對齊。我們需要用一些 overflow: hidden; padding-bottom: 9999px; margin-bottom: 9999px; 這類的 CSS hack。(不乾淨的寫法。 在 flexbox，可以透過簡單 flex-grow 就可以做到相同的效果
-
雙邊側欄 + 中間主內容隨螢幕改變大小。 如:
這樣的一個版面配置在過去的 css 排版可能需要想一下如何編排架構 但在 flexbox 的版面配置上，也只需要搭配 flex-grow 就可以做到
總結:
我是覺得 flexbox 這樣彈性的排版，解決過去許多煩人(CSS hack)的問題，但目前在 IE 上還是有些 bug。
如果可以排除 IE 的話，其實我自己是還蠻偏好使用 flexbox 版面配置的，尤其這種彈性排版又可以解決許多 responsive design 的狀況(甚至省掉許多 css3 media query)。
參考資料：