# CSS3 flex

## 寫在flex前
* CSS排版演化史：table > float(CSS2) > flex(CSS3，主流) > grid(最新，返祖)
* 特性論：flex預設不斷行；float預設超過寬度自動斷行。
* 功能論：flex適用於小版面，grid適用於大版面；flex難達成文繞圖，float易達成文繞圖。

## flex系統撰寫手順舉例

父層 { /* flex預設橫向排列且等高 */
    display: flex; /* 決定用flex模式 */
    flex-direction: row; /* 設置主軸方向及斷行與否 */
    flex-wrap: wrap;
    align-content: center; /* 雙向置中 */
    justify-content: center;
}
子層 {
    flex-basis: auto;
    flex-grow: 1; /* 決定是否參與空間分配及收縮 */
    flex-shrink:1;
}

## 父層設定
### display: flex; > 設置於父層
* 設置於父層，該元素即是一個flex box；並將子元素定義為flex item，預設寬度是最小寬度。須特別注意影響層級只會到子層，不會繼承到孫層。
* 子元素伸縮項目的預設高度是和父層等高。
* flex box的區塊配置，是以剩餘空間的概念在設置。
* flex box有主軸、側軸之分；物件排列主要是依據主軸(資料的流向)而改變，不一定是由左至右或由上至下。
* 不會出現像CSS2排版時的問題，如float須用overflow及clear還原高度的問題；及inline-block須用font-size消除空白和須用vertical-align對齊上方的問題。

### display: inline-flex; > 設置於父層
* 概念同inline-block，元素會排列在一條直線上；flex則同block，會造成區塊斷行。
* 特性同inline-block，會有小空格問題，並同樣受文字控制屬性影響。

### flex-direction: row; > 設置於父層
* 預設為row，flex item水平排列，由左往右。
* column，flex item垂直排列，由上往下。
* 當flex-direction的值為column或column-reverse時，flex-basis則代表高度。

### flex-wrap: wrap; > 設置於父層
* 預設為nowrap，flex item寬度或高度超過父層時，不斷行。
* wrap，flex item寬度或高度超過父層時，斷行。

### align-content: center; > 設置於父層
* 側軸(預設為垂直方向)的多行對齊。
* 預設為stretch，伸縮行填滿容器的剩餘空間。
* center，伸縮行垂直置中。
* flex-start，伸縮行垂直靠上。
* flex-end，伸縮行垂直靠下。
* space-between，伸縮行平均分配在最上方邊界和最下方邊界。
* space-around，伸縮行上下預留相同空間，平均分配在上方和下方。
* 當flex-direction設定為column時，對齊方式改為左右。

### align-items: center; > 設置於父層
* 側軸(預設為垂直方向)的單行對齊；僅對單行的flex item有效，超過一行必須用align-content。
* 預設為stretch，伸縮行等高；使用除了stretch以外，其它的align-items屬性，flex item才會彈回原本內容的高度。
* center，伸縮行垂直置中。
* flex-start，伸縮行垂直靠上。
* flex-end，伸縮行垂直靠下。
* beseline，伸縮行對齊文字基線。

### align-self: auto; > 設置於子層
* 搞特殊，單一伸縮項目垂直對齊。
* 預設為auto，延續父層對align-items的設定。
* 其餘屬性同align-items。

### justify-content: center; > 設置於父層
* 主軸(預設為水平方向)對齊。
* 預設為flex-start，伸縮行水平靠上。
* flex-end，伸縮行水平靠下。
* center，伸縮行水平置中。
* space-between，伸縮行平均分配在最左方邊界和最右方邊界。
* space-around，伸縮行上下預留相同空間，平均分配在左方和右方。
* 當flex-direction設定為column時，對齊方式改為上下。

## 子層設定
### flex-basis: ?px; > 設置於子層
* 預設為auto，依照內容計算寬度。
* 當設定為0，flex item會無視內容寬度，改以flex-grow分配的值，呈現結果。
* flex系統內，預設狀態下，若flex-basis和width同時存在，width會被覆蓋掉。

### flex-grow: 1; > 設置於子層
* 預設為0，初始狀態不參與分配父層剩餘空間。
* 子元素flex item利用flex-grow屬性，取得父層flex box剩餘空間，並分配份數。

### flex-shrink: 1; > 設置於子層
* 預設為1，即便子元素flex item寬度總和超過父層flex box寬度，也會被強制壓在父層flex box的寬度內。
* 想突破父層flex box寬度，必須將flex-shrink設為0，代表不參與收縮。
* img已經不屬於flex系統，不受限於父層flex box的寬，故當子元素flex item寬度總和超過父層flex box寬度，將強制破版；必須設置 width: 100% 才會正常。

### order: ?; > 設置於子層
* 預設為0，可為負值，無須加單位，數字越小位置排序越前面。

###### tags: `frontend` `cssmonster` [:arrow_right: Back to Front End Homepage :arrow_left:](/S-c0eqQmS16D8tcTx4ae1g)