文科少女學程式

在製作網頁時，想要有漂亮、看起來舒適的版面，
就會需要透過CSS來調整網頁版面，
這個時候就可以利用Flexbox來進行版面的排版。
這次就讓我們來了解一下什麼是Flexbox吧！


Flexbox系統是什麼？
Flexbox的概念像是把想要排版的東西(區塊)用一個容器(container)裝起來後，
讓這些東西(區塊)變成可以在容器的空間中調整位置的item，
再進一步地調整這些東西(區塊)的位置。

以實際呈現的畫面來看的話，就會是下面這樣。
1個容器裝著3個東西

怎麼使用Flexbox？
就如同前面所說的一樣，如果要使用Flexbox，
想要調整位置的東西(區塊)外面一定要再設定一個容器裝著。
所以Flexbox起手式！！
宣告container
白話一點的說法就是把item外面那一層container的display屬性設定成flex。
實際寫法為：
display: flex;

以下圖為例的話，我們想要調整位置的東西是class為item的三個區塊。
所以必須讓這三個div外面再包著一個div(藍框的部分)。
(以下的例子為了讓大家可以一眼看清楚，所以外面div的class為container)

接著在CSS的部分，幫container加上display這個屬性。

讓我們來看看設定前和設定後的差異吧！
感受到差異了嗎？接下來繼續看一下，設定display後，
如果要調整這些item的位置應該要怎麼做~

想要調整這三個item的話，
記得！雖然我們是操控這三個item的排版，
但是設定位置的屬性一樣是寫在container的設定裡，
跟display一樣，不是寫在item的CSS設定裡喔。
(這部分文科少女在學的時候有搞混過，所以特別寫出來提醒大家)

實際例子可以參考下圖，我在設定display屬性後，
又增加了另一個跟item位置有關的屬性(紅框處)，
item位置就改變了。
但是如果是設定在item上的話，就不會有位置上的改變喔！

運用Flexbox系統的item排列方向
將display屬性設定成flex後，會呈現預設的flex排列方向，也就是row。
若特別用flex-direction設定成column，才會以column排列。
想了解什麼是column和row嗎？可以參考上次有提過的
點擊了解column和row

這邊要特別注意的是！！！
如果是row的排列，主要軸是水平方向，交叉軸是垂直方向。

可是一旦變成column方向排列，也就會變成下面這個樣子。
主要軸會變成垂直方向，交叉軸會變成水平方向。

用最簡單的方式去記的話~
就是主要軸永遠都是item排列方向上的那條線
所以當物件從左至右排，主要軸就是水平方向；
從上往下排，主要軸就是垂直方向。
Flexbox的排版活用法
緊接著馬上進入要怎麼活用Flexbox系統進行排版吧！
這一個部分我把設定內容分成三大部分來說明～

設定排列方向(flex-direction屬性)
想要設定item的排列方向，可以透過flex-direction屬性來調整。
這一個部分會搭配row和column來設定
(差連結 什麼是row和column)

直接來看看實際的排列呈現
1. flex-direction: row
靠左，且從左排到右

2. flex-direction: column
靠左上方，且從上排到下

3. flex-direction: row-reverse
靠右，且從右排到左

4. flex-direction: column-reverse
靠左下，且從下排到上


設定對齊方向(justify-content屬性&align-items屬性)
在設定對其方向的部分，主要分成兩大類。
一類是主要軸方向的justify-content屬性
=>這一個屬性主要是調整主要軸的對齊方向
一類是交叉軸方向的align-items屬性
=>這一個屬性主要是調整交叉軸的對齊方向


justify-content屬性(主要軸)
1. 靠左/靠上方
justify-content: flex-star;
這個設定是預設的設定，已就是說沒有特別設定的話，
就會直接顯示這個狀態。


2. 靠右/靠下方
justify-content: flex-end;

3. 置中
justify-content: center;

4. 分散對齊-分散到底 
justify-content: space-between;

5. 分散對齊-中間item距離左右物體分配到等量的空格，但左右/上下兩側的item只會剩一半
justify-content: space-around;

6. 分散對齊-每個item左右/上下兩邊的空格都一樣
justify-content: space-evenly;


align-items屬性(交叉軸)
1. item會對齊上方/左邊
align-items: flex-start;

2. item對齊最下方/右邊
align-items: flex-end;

3. item對齊中間線
align-items: center;

4. 以item的內容(文字)下去對齊，再讓整個item跟著移動
align-items: baseline;

5. item會延伸整個容器
(*只有沒有特別設定height的item會延伸，4號item因為有設定height，
所以會固定高度。)
align-items: stretch;


設定自動換行(flex-wrap屬性)
不想要讓item擠在框框內被壓所變小，可以使用flex-wrap屬性，
讓item自動換行。

不自動換行
flex-wrap: no-wrap;


自動換行
flex-wrap: wrap;

同時設定方向和換行(flex-flow屬性)
想要一次設定item的排列方向，和是否換行時，
使用flex-flow屬性就可以一次滿足你。
因為flex-flow屬性就等於是flex-direction和flex-wrap的合併寫法。

所以你可以寫成這樣~
flex-flow: row wrap;
意思也又是橫向排列+自動換行


好啦！！今天的flexbox的內容就聊到這裡啦～
下次換看看另一個也很好用的排版屬性^^
掰餔


前端學習相關文章在這裡
CSS的row？column？傻傻分不清楚
網頁排版必懂基礎！CSS盒子模型(Box Model)