一維佈局系統--Flexbox:介紹
Flexbox是CSS底下的排版設定，若是加上RWD的設定，網頁佈局會更加有彈性。
CSS佈局的進化史
CSS3以前，想要讓網頁元素垂直至中或左右對齊，float 和 positioning是一定會用到的技巧。但是光是一個設定，可能就需要一些繁雜的步驟。
CSS3問世後，我們可以使用Flexbox下一些簡單的指令，讓網頁元素排版達到我們想要的效果。相較於float 和 positioning，操作比較好上手。
現代大多使用Flexbox來操作，但遇到特殊的開發情況時，還是會回頭使用float 和 positioning。
CSS 3推出了 flexbox 和 grid 兩套系統，以下介紹他倆的不同點：
Flexbox：一維佈局排版(one-dimensional layout solution)，最先出現的排版方式，單方向性、橫或列排版。若想要組成二維佈局排版，必須從兩種方向下去安排。在簡單的一維佈局中容易維護。
grid：二維佈局排版(two-dimentional layout solution)，之後才出現的排版方式，不是用來取代Flexbox，而是方便人們同時進行兩種方向(行+列)的排版。
Flex基本架構
你可以透過以下的CSS設定，來將一個容器宣告為flex container。
display: flex接著，裡面的元素都會變成 flex item，只要更改flex的屬性， flex item就會隨之垂直、對齊等排版變化。
步驟1：建立flex container
在HTML建立一個flex-container、flex-item的<div>之後，在CSS的.flex-container的display屬性設為flex。
CSS.flex-container{
display:flex
...
...
}
此時，你會發現item原先以"block"做垂直排列，現在變成水平排列(Row)，而且item長寬會隨著container的寬度而作微調。
步驟二：設定flex-item的排列方式
記得前面說過，flexbox是一維排列，我們可以讓container中的item做水平排列(Row)或是垂直排列(column)，只能二選一。要如何設定呢?
在CSS flex-container加上flex-direction的設定即可。
- flex-direction: row (item按順序、由左至右、水平排列)
- flex-direction: column ( item按順序、由左至右、垂直排列)
- flex-direction: row-reverse ( item反順序、由右至左、水平排列)
- flex-direction: column-reverse ( item反順序、由右至左、垂直排列)
如果item很多，不想讓item溢出邊界，我們要如何讓它自動換行呢?
在CSS flex-container加上flex-wrap的設定即可。
- flex-wrap: no-wrap(這是初始設定，會溢出邊界)
如果維持no-wrap設定，你會發現item會隨著container的寬度做改變，讓它們都擠在同一水平面上；但當flex-item的width改為min-width，item就會超出container的框架。
- flex-wrap: wrap(由左到右自動換行)
- flex-wrap: wrap-reverse(反順序，由右到左自動換行)
如果想要同時設定排列方向與自動換行，要如何去設定呢?
flex-direction和flex-wrap可以結合成flex-flow屬性。flex-flow第一個值是flex-direction，第二個值是flex-wrap。
.flex-container{
flex-flow:row wrap;
}步驟三：對齊flex-item
flex-item之間是可以對齊或調整間距的。以flexbox(一維)為例，我可以先使用flex-direction來決定對齊水平軸(main axis)或對齊垂直軸(cross axis)，接著再使用justify-content和align-item控制item與item之間的對齊。
．水平軸(main axis)：由左而右，適用於justify-content
．垂直軸(cross axis)：由上而下，適用於align-item
justify-content的場合
justify-content分成集中對齊與分散對齊兩種形式。
集中對齊
- flex-start
全部item按順序緊靠水平軸的起點。
justify-content:flex-start
2. flex-end
全部item按順序緊靠水平軸的終點。
justify-content: flex-end
3.center
全部item按順序在水平軸的中間。
justify-content: center
分散對齊
- space-between
justify-content:space-between最兩側的item會緊貼container，其它空間均勻分配。
2.space-around
justify-content:space-around每個item都有等距的左右間隔，因此item與item間的間隔是2倍寬。
3.space-evenly
justify-content:space-evenly所有item的間距平均分配，分散於container中。
align-item的場合
為垂直軸上的排列方法。
- stretch(預設)
align-items:stretch一般情況下item會延展填滿空間，但如果item特別有規定width或是height，會優先尊重此配置，例如黃色方塊。
2. flex-start
align-items:flex-start貼緊垂直軸(cross axis)出發點排列。
3. flex-end
align-items:flex-end貼緊垂直軸(cross axis)尾端排列。
4. center
align-items:centeritem會中央對齊垂直軸(cross axis)。
5. baseline
align-items:baselinebaseline是指文字下緣對齊的基準線。
若item中有文字，設定"align-item:baseline"會根據item中文字的位置，使item框架移動至使文字對齊Baseline。
☆注意：justify-content和align-item可在同一個container中設定。
步驟四：定義flex-item尺寸
接下來會介紹調整item的尺寸與比例的兩種CSS屬性。
flex-basis
以父尺寸--包著item的container尺寸為基礎，調整出比例。
EX: flex-basis:30%;這樣item的寬度比例就是container的30%。
flex-grow
如果設定為0，item沒有變化；如果設定為1以上的數字，item就會自動擴大填滿空間。
EX: flex-grow:1;這樣item就會擴大占滿沒有其餘設定的container空間。
步驟五：設定item排序(order)
如果加上CSS的屬性"order"，就可以為item做排序。
所有的item order預設皆為0，故設定order就可按照數字大小排列順序。
例如，item A排在item B的前面，如果item B 在CSS做以下設定：
order:-1;這樣item B就會跑到item A前面了。
步驟六：結合media queries做響應式網頁
如果想要根據不同螢幕尺寸做排版變化，可以使用之前有提及的media queries來做響應式網頁。
例如，如果我想假設超過600px就改變排版，可以這樣設定：
@media screen and (max-width: 600px) {
//填入CSS設定
....
}@media screen and (min-width: 600px) {
//填入CSS設定
...
}
記得，最小尺寸的要寫在前面，這樣才會依序做變化。
或是只要寫簡單一點，
//填入CSS設定
....
....@media screen and (min-width: 600px) {
//填入CSS設定
...
}
這樣就是在超過600px的時候會做變化，跟前面是同樣道理。
步驟七：局部流動 (Mostly fluid)
RWD設計，可以讓我們設計從小螢幕到大螢幕的網頁排版；但是當viewport放到最大時，由於內容(文字、圖片方塊)也會被拉長，造成畫面不美觀。
局部流動提供一種設計，那就是當viewport延展到一定的程度，就不再拉長，使畫面比例維持和諧。
在最外層的div或是container中，CSS加入：
max-width: 800px;這樣，如果寬度超過800px，畫面就會停止延展。
這樣就完成局部流動了。
步驟八：細微調整
以下是在不同尺寸螢幕下，可調整的CSS數據：
字體大小：
font-size: X em;行高：
line-height: y em;段落間距：
margin-bottom: Z em;左右留白：
padding: R em;不想讓一行字太多：
max-width是你的好幫手寬度調整：
width: X %;
☆容易犯的錯誤：
依據版型變化，適當選用flex-flow中的row和column、wrap和nowrap。
以上就是對於flexbox的簡要介紹。
