Flexbox是CSS常見的排版方式之一，相較於其他傳統方式簡易許多，此篇文章將對Flexbox進行詳細介紹，文章中以圖片為主文字文輔，主要讓讀者可以快速的了解各個屬性的效果。
架構介紹
本次教學的架構為一個container，裡面有三個等大的box，容器內的元素我們稱之為item。
<div class=”container”>
<div class=”box” id=”box1">1</div>
<div class=”box” id=”box2">2</div>
<div class=”box” id=”box3">3</div>
</div>
Display
想要使用Flexbox，只要將外容器的display更改為flex或inline-flex，差別在於使用flex容器不會隨著變化，而inline-flex容器會隨著內容變化。
.container {
display: flex | inline-flex;
}
flex-direction
flex-direction可以決定主軸的方向，主軸的方向將會影響容器內的元素排序順序、方向，其中row為預設值。
row: 主軸從左至右。
row-reverse: 主軸從右至左。
column: 主軸由上至下。
column-reverse: 主軸由下至上。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap
flex-wrap可以設定當元素超出容器時該怎麼顯示，預設為nowrap也就是超出空間時不換行，而wrap當容器空間不夠顯示時會換行。
以下範例將每個box的寬度從80px調整至300px，從例子可以發覺當我們設置為nowrap時，每個box的寬度並沒有在300px而是213px左右，但是當設置為wrap時每個box的寬度會維持在300px，若空間不夠則換行。
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
很多讀者可能會有疑問，為什麼wrap-reverse的擺法有點怪怪的呢？是因為wrap-reverse所更改的為”副軸”並非主軸，因此擺放的規則為：
主軸從左至右，副軸由下至上
order
當我們想更改容器內的箱子排序順序時怎麼辦呢，Flexbox有提供一個屬性為order，每個item預設的order為0，依照大小排列。
此例我們將box3的order改為-1會發生什麼事呢?
#box3 {
order: -1;
}
根據上面例子，若將box1的order改為2，box3的order改為-1，結果是不是已經可以猜到了呢？
#box1 {
order: 2;
}
#box3 {
order: -1;
}
justify-content
justify-content可以讓我們設置容器內的箱子如何依據主軸對齊。
.container {
justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly;
}
flex-start;
evenly;align-items
align-items可以讓我們設置容器內的箱子如何根據副軸對齊，justify-content是主軸對齊，align-items則是副軸對齊。
為了看出效果我們將container的高度從80px調整為100px，也將每個box的字型大小設成不一樣，此例中因flex-direction為預設值(row)，故主軸為橫向，副軸為縱向。
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
;;
;
;
;baseline將依照基準線對齊，可以看到三個箱子的字是對齊於基準線上。
align-content
.container {
align-items: stretch | flex-start | space-between | space-around;
}align-content的效果與align-items類似，差別在於align-content適用於多行元素，如設置flex-wrap: wrap;時產生的的多行元素。
align-self
align-self可以讓我們設定各別箱子元素對於副軸的對齊方式。
#box1 {
align-self: flex-start | flex-end | center | baseline | stretch;
}範例:
#box1 {
align-self: flex-start;
}
#box2 {
align-self: flex-end;
}
#box3 {
align-self: center;
}
flex-start, flex-end, center以上是Flexbox的基礎教學，不知讀者們是否有更清楚了呢？有了基礎以後可以至以下網站進行遊戲式的學習，可以幫助更熟悉Flexbox的使用。
另外這個網站介紹的很詳細，相信看完這些資源會對新手的幫助很大。
看完文章也練習過遊戲之後，可以繼續前往CSS Flexbox 新手入門教學 — 登入介面實戰進行實戰練習喔。
