[CSS] flexbox 解析,解決傳統排版的複雜問題

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)。

 

參考資料:

http://www.slideshare.net/ssuser2592bd/flexbox-59786366

Leave a Reply