Skip to content

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

Published: at 05:51 AM (3 min read)

CSS3 的新排版方式,flexbox (目前在IE上好像還是有不少 bug…)

利用 flexbox 可以解決我們傳統排版方式遇到的許多問題。

在這篇文章中,我就不介紹 flexbox 的用法與屬性了(flexbox教學的文章網路上很多,google後應該一堆)

但我還蠻推薦這個網站: http://flexboxfroggy.com/

花不到一個小時就可以很快上手 flexbox 排版囉!

接下來,我會簡單比較幾個複雜的案例,使用 flexbox 排版與傳統排版的差異


總結:

我是覺得 flexbox 這樣彈性的排版,解決過去許多煩人(CSS hack)的問題,但目前在 IE 上還是有些 bug。

如果可以排除 IE 的話,其實我自己是還蠻偏好使用 flexbox 版面配置的,尤其這種彈性排版又可以解決許多 responsive design 的狀況(甚至省掉許多 css3 media query)。

參考資料:

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