善用flexbox ，更容易的版面配置

1. CSS 版面配置 (續)
flexbox

2. 很久很久以前....
http://www.slideshare.net/ssuser2592bd/css-layout-53263637

3. 談談CSS排版趨勢
帳號 密碼
取消 登入
table
帳號
密碼
登入
DIV+CSS
flexbox
grid Layout
susy
………

4. 這些也太難記了吧....
• 水平置中
• margin:0 auto;
• text-align:center;
• 垂直置中
• line-height ....
• vertical-align ...
圖片來源:https://www.facebook.com/165330740249615/photos/pb.165330740249615.2207520000.1457264518./896941963755152/?type=3&theater

5. 大綱
• 什麼是flexbox? 支援度?
• 用法
• 與過去比較?
• 總結

6. flexbox是什麼?
• 一種排版(布局)方式
• 較有彈性的排版
• 解決過去複雜的版面配置問題
PS. Modernizr 偵測是否支援

7. 用法
• flex container
• display:flex;
• display:inline-flex;

8. flex-direction
• flex-direction:row;
• flex-direction:row-reverse;
• flex-direction:column;
• flex-direction:column-reverse;
1 2 3
3 2 1
1
2
3
3
2
1
https://jsfiddl.net/camel2243/33Lbj879/

9. justify-content
• flex-start
• flex-end
• center
• space-between
• space-around
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3
https://jsfiddle.net/camel2243/4eyr3m2y/1/

10. align-items
1 2 3
1 2 3
1 2 3
flex-start
https://jsfiddle.net/camel2243/4tmd88n3/2/
flex-end center stretch
1 2 3

11. align-content
1 2 3
1 2 3
1 2 3
1 2 3
4 5 6
4 5 6
4 5 6
4 5 6
flex-start center space-between space-around
https://jsfiddle.net/camel2243/pe1xa2oz/1/
flex-wrap ( wrap | nowrap | wrap-reverse)

12. 比較
• 常見的選單、導覽列
https://jsfiddle.net/camel2243/s9xaL8gd/1/
熱門首頁 生活 熱門首頁
DIV + CSS
display: inline-block;
width: 33%;
width: 50%;
display: flex;
flex-grow: 1;
align-items: flex-start;
flexbox

13. 比較
• 三欄式頁面
我
有
三行
我有
兩行
我一行 我
有
三行
我有
兩行
我一行
overflow:hidden;
DIV + CSS
padding-bottom: 99999px;
margin-bottom: -99999px;
display: flex; flex-grow: 1;
flexbox
https://jsfiddle.net/camel2243/p5j6kLua/2/

14. 比較
• 雙邊側欄
固
定
寬
雙
側
欄
主 內 容
隨 螢 幕
大 小 改 變
https://jsfiddle.net/camel2243/w7ofqkmh/3/
display: flex;
flex-grow: 1;
flexbox
如果是DIV + CSS 呢?
你會怎麼寫!?

15. 總結
• 垂直置中不再困難
• 減少浮動( float ) 與 clearfix
• 減少 CSS hack (暗黑寫法)
• 簡潔的寫法與架構，容易維護及修改
圖片來源:https://www.facebook.com/165330740249615/photos/pb.165330740249615.2207520000.1457264518./896941963755152/?type=3&theater

16. 參考資料
• http://zh-tw.learnlayout.com/flexbox.html (保哥 CSS 版面配置翻譯)
• https://lincolnloop.com/blog/introducing-flexbox-fridays/ (flexbox)
• http://andyyou.github.io/javascript/2015/09/09/understand-
flexbox.html (flexbox)
• http://flexboxfroggy.com/ (HTML5 flexbox 小遊戲)

17. Q & A