Flexbox教學基礎運用篇：解決網頁排版問題易如反掌！
相信無論是初接觸網頁開發的同學們或是已經有經驗的網頁工程師，一定都曾經遇過「排版」這個難題！當畫面上需要整整齊齊的呈現項目，到底要怎麼開發才是最好的方法呢？本篇文章將介紹可輕易解決排版問題的 CSS3 屬性─靈活箱子「Flexbox」，透過Flexbox教學輕鬆解決排版問題！
Flexbox是什麼？
有經驗的同學們會知道可以用 “width” 來平分元件的寬度，以此達到水平排列的呈現，這的確是方法之一，但是當專案變大需要呈現在不同裝置上時可就需要精心設置啦，無論是維護或是開發上也會相較麻煩，這時利用Flexbox將會為你解決所有難題。
▲運用Flexbox可以有效解決網頁排版問題Flexbox的好處有哪些？
Flexbox 顧名思義他是一個靈活的容器，可以更快更直覺的讓物件一個個的排列為想要的樣子，且無論在手機、電腦、平板的顯示上，聰明的 Flexbox 也會自動調整成適應視窗的大小並且保持原本的排列，並且提供多種屬性可使用，讓你無論遇到的是要向左、向右、甚至是平均分散，Flexbox 全部都幫你準備好了！
Flexbox教學─屬性介紹
根據 W3C 規範中，Flexbox 有九大屬性，在這一段落當中我們選出 Flexbox 當中最常見且使用範圍最廣的屬性來介紹：
display
display 是常見的屬性，而在 flexbox 當中又有 flex 以及 inline-flex 可以選擇！其實我們可以想做是 block 以及 inline-block，但 flex 與 inline-flex 的子元素卻具備了更多彈性的設定。
flex-direction
這個屬性顧名思義就是在控制 Flexbox 容器內物件的呈現方向，分別可以選擇由左至右的 row 以及相反的 row-reverse 還有從上到下的 column 與相反的column-reverse。
justify-content
這個屬性是專為要「水平」排列的物件所設置，有五種不同呈現的方式分別為對齊左邊起點的 flex-start，對齊右邊終點的 flex-end，物件對齊中間的 center，物件平均分散且貼齊左右的 space-between ，物件平均分散且左右間距皆相同的space-around。
align-items
此屬性與 justify-content 十分相似，但它是針對「垂直」排列的物件哦，一樣有五種呈現方式，除了前三種的 flex-start , flex-end , center 與 justify-content 概念相同以外，在此屬性中還有能將內容元素全部延展至 Flexbox 的高度的stretch 以及將物件的基線作為對齊標準的 baseline 選項！是不是很有趣呢？
Flexbox教學課程從實際操作中快速學習
Flexbox 的出現讓網頁開發更加的直覺也更佳靈活，你也躍躍欲試的想在自己的作品中應用 Flexbox 製作排版嗎？推薦你試試這個
Flexbox線上練習的小遊戲，從遊戲中直接操作練習就能將上述分享的Flexbox教學更加了解！
▲藉小遊戲練習運用Flexbox屬性不過實際操作與應用雖然能快速上手，但若要將Flexbox融會貫通，了解其概念也是很重要的！巨匠電腦的
網頁設計/開發課程中，不僅是學習網頁版面的規劃，Flexbox教學課程將會帶著你使用實際案例剖析應用，讓你更能熟悉 Flexbox 。無論是單欄、雙欄、格狀設計，Flexbox 的靈活屬性都可以幫你輕鬆建置，跟著我們一起來完成自己的小專案吧！
免費學習資源不漏接
