這章節要介紹的是「css 3 的彈性排版屬性 - Flex」

釐清 Flex 與格線系統的關係

格線系統是使用 CSS flex 去設計，除此之外還增加格線所需要的屬性，如：gutter, col...
flex 是 CSS 屬性，不會限制僅能使用在格線系統內

因此：

最外層什麼時候要用.row去包，什麼時候要用.d-flex去包？

在需要使用格線系統時就可使用 .row，僅有使用 flex 就使用 .d-flex
如果不清楚一些特殊使用的方法，這樣是最安全且正確的執行方式
格線系統會有額外的屬性 (gutter, 補回空間等)，原理在前面的章節有介紹過
可以再參考前面章節，並透過 Chrome 開發者工具再次檢驗看看

兩種排版方式

在課程中，有舉例 2 種不同型式的排版

(1) 最外層容器 container - 內容 box

適合不需要任何格線系統，主要內容佔用滿寬的情況下

(2) 最外層容器 container - row - column - 內容 box

需要搭配格線排版，內容會依據需求分割的情況

Flex 需要了解的

有以下這幾點：

軸線觀念
- float 只能在水平方向排列
- 但是，Flex 不像 float，Flex 也可以在垂直方向排列

相關屬性
- 分為「外層屬性」與「內層屬性」

對齊方法

Bootstrap 使用到的方法
- bs 是怎麼運用這些 Flex 的方法

Flex 軸線觀念

有很多的對齊屬性，與「主軸、交錯軸」都有很大的關係

主軸

「主軸」預設是「由左至右」

「主軸」會有「起點、終點」，這會影響到「物件的排列方式」
- 預設是：從「起點」開始，「由左至右」排列

交錯軸

「交錯軸」會垂直於主軸
「交錯軸」也有「起點、終點」

Justify content

排列方式：
- 平行於「主軸」
- 可以對齊於「主軸的起點 or 終點」
  
  （對齊於：主軸起點）
  
  （對齊於：主軸終點）

* 也可以「等距排列」

![](https://i.imgur.com/E6pecdC.jpg)

Align items

在具有 flex 屬性的 flexbox containers 中，使用「align-items utilities」來使物件對齊

如果物件的`flex-direction: row`，就會以「y 軸」來做對齊

如果物件的`flex-direction: column`，就會以「x 軸」來做對齊

這裡用「.align-items-center」來做範例講解
（codepen 範例）

如果物件的`flex-direction: row`，加上`.align-items-center`後，就會以「y 軸」來做「置中對齊」

        <div class="row align-items-center">
            <div class="col-3">
                <div class="box"></div>
            </div>
            <div class="col-3">
                <div class="box"></div>
            </div>
            <div class="col-3">
                <div class="box"></div>
            </div>
            <div class="col-3">
                <div class="box"></div>
            </div>
        </div>

如果物件的`flex-direction: column`，加上`.align-items-center`後，就會以「x 軸」來做「置中對齊」

        <div class="row flex-column align-items-center">
            <div class="col-3">
                <div class="box"></div>
            </div>
            <div class="col-3">
                <div class="box"></div>
            </div>
            <div class="col-3">
                <div class="box"></div>
            </div>
            <div class="col-3">
                <div class="box"></div>
            </div>
        </div>