# 3/17 - CSS - Part 2
## Flex：子層物件橫排
### 尺寸計算很重要！

display: flex

flex-wrap: wrap;                // 換行
flex-direction： column or row  // 橫排的方向設定

### 主軸的方向，就是資料的方向

justify-content: 順著主軸的屬性 對齊

                space-between   把剩餘空間 自動分配 給子物件之間
                                （無兩側，甭算margin）
                                
                space-around    把剩餘空間 自動分配 給子物件兩邊
                                （每一物件兩側都要分配）
                
                space-evenly    把剩餘空間 等距分配 給子物件
                                （但不太會用到）（格線系統）（支援度問題）


---

PS:
#### ＊如何將文字水平垂直至中

PS:
#### command + / 將程式碼註解起來


---

### ＊nth-child()
「偽類選取器（pseudo class selector）」，標準的語法是 :nth-child(n)

括弧內的「n」是最重要的關鍵字元，「n」可以是單數「odd」，或者是偶數「even」


http://csscoke.com/2013/09/21/使用css3-nth-childn-選取器詳解/

---
### ＊快捷鍵 快起來

.aa                    <div class="aa"></div>

.bb.cc#alex            <div class="bb cc" id="alex"></div>

section.dd.ee#alex     <section class="dd ee" id="alex"></section>

---

### ＊交叉軸
跟主軸有關
* flex-direction
* flex-wrap
* justify-contant

跟交叉軸有關
* align-items: 控制 flex物件
* align-content: 控制 交叉軸 彈性列的位置

align-items: flex-start
             flex-end
             center

分成兩個彈性列（寫在父層）

因為有兩個彈性列，因此col2 margin top會在col 5上方

＊＊margin-top: auto＊＊
將剩餘的margin，分配到top上方

把彈性列往上對齊