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)。
參考資料: