Flex 排版特性與區塊元素的差別
一般如果使用三個區塊元素進行排版，區塊元素會自動填滿整個空間。
1 | <div class="container"> |
當我們將continaer class 設定flex佈局方式，每一個flex-item都會變成flex 子元素。
請注意 flex 排版特性只影響 flex 容器及容器內的第一層子物件而已。
flex 容器有以下預設屬性：
- flex 容器預設會填滿父容器的寬度
- flex-direction: row（預設主軸的定義是水平的，由左至右）
- flex-wrap: nowrap（預設子元素在 Flex 容器裡面是不換行的，子元素會在單一行中排列）
當 flex 容器內的第一層元素被轉換成flex 子元素時，flex 子元素有以下預設屬性：
- justify-content：flex-start（預設 flex 子元素沿著主軸起始點排序）
- align-items: stretch（預設交叉軸會將子元素延伸以填滿 flex 容器的高度）
- flex-basis: auto（預設子元素的大小由內容、
width或height設定來決定） - flex-grow: 0（預設不會有所謂
擴展效果。此屬性主要是分配剩餘空間的比例，負值無效） - flex-shrink: 1（預設會有
收縮效果，此屬性主要是分配超出空間的比例，負值無效）
flex 情境解析 - 理解預設屬性在 flex 排版中的實際作用
這邊直接透過兩種情境快速理解這些特性：
當 flex 子元素總寬度小於 flex 容器預設排版(存在 flex 容器剩餘空間)
按照前面所提到的特性去理解(千萬不要死背，會出大事)：
【 觀察主軸的方向 - flex 容器預設屬性 】
- flex-direction: row
確認當前畫面主軸的方向，就可以確認交叉軸的方向。flex 元素會按照主軸的方向排列，當前畫面是由左至右，因此可以判斷當前主軸是由左至右的方向。但是
主軸並非永遠都是由左至右(非常重要)，軸線的方向會因為 flex 主軸方向設定(flex-direction)、語系方向(HTML dir Attribute)、書寫模式(writing-mode)及內容呈現方向(direction)影響。
【 觀察主軸的方向 - 說明 flex 子元素預設屬性 】
- flex-basis: auto
預設 flex 子元素的寬度是由其內容撐開的，在未設定
width及height的情況下。因此如果 flex 子元素未設置寬度且flex 子元素內無內容的情況下，flex 子元素會看不到喔！！！
- justify-content：flex-start
預設 flex 子元素
主軸對齊的方向是在主軸起始點。
- flex-grow: 0
注意到上面的圖中一塊的
剩餘空間，這部分是由flex-grow進行管理。只有在 flex 子元素總寬度小於 flex 容器的時候會產生剩餘空間。預設的情況下，這個剩餘空間是不會進行分配的，也就是0。
【 觀察交叉軸的方向 - 說明 flex 子元素預設屬性 】
- align-items: stretch
預設 flex 子元素
交叉軸對齊的方向是會延展至容器的高度。
上面還有很多預設屬性沒有說明到！是不是想偷懶 > < ，才不是，因為透過另一個情境搭配說明可以讓大家更能理解。
當 flex 子元素總寬度大於 flex 容器預設排版(存在超出 flex 容器空間)
- flex-wrap：nowrap(預設不會換行)
不管你在 flex 裡面放多少東西，他會試著把他
收縮在同一行當中，不讓 flex 容器內的子容器換行。至於收縮這件事情，則是flex-shrink負責，因此若將flex-shrink設定為 0 (關閉)，flex 子容器總寬度大於 flex 容器寬度時，不會嘗試壓縮，就會看到 flex 子元素衝出去 flex 容器的限制。
- flex-shrink: 1(預設 flex 容器會試著收縮容器內的子容器)
收縮的部分只會發生在
flex 子元素總寬度大於flex 容器時。理解上也相對好理解，因為 flex 容器裝不下了，才會需要進行收縮，讓 flex 子元素能安全地待在 flex 容器裡，不要亂跑(不然前端工程師會哭給你看ＱＱ)
這邊可能會想說，你怎麼知道他超出去了容器的寬度限制呢？
這邊試著關掉flex-shrink將其改變成0，不讓 flex 子元素收縮的情況下，會發現其超出容器的寬度。
敲鐘下課囉～今天是睽違半年重新動筆，希望能找到自己撰寫風格 ❤️
資料來源
- 金魚都能懂的CSS 選取器(我是金魚粉，超級喜歡 Amos 老師，推薦大家都買一本來嗑)