CSS｜Flex 之實戰會用到的小技巧分享
安安大家好！這次想分享的是 CSS 中，「Flex」這個每位前端工程師都必須要會的佈局屬性。
這篇並不是理論篇，不會一步一步教你如何使用，因為網路上的相關優質文章太多了，這次想分享的是：「我與團隊在實戰上真的會用到，而且個人覺得不錯的技巧」，提供給大家參考參考。
蛤？你說你不想用 Flex，只要用 Float 跟 Table 就可以做得很好了。
那當然也是可以啦！
Margin Auto
相信這個詞大家都不陌生，基本上有學過置中技巧的都一定用過這招，但很多範例都是使用 Block 元素來示範，那當然是沒什麼問題。
但你有沒有遇過設了這個屬性沒有作用的情況呢？
給我說有喔！
我們在設計一些共用 component 的時候，有時候會希望這個 component 是 inline 的，確保任何使用這個組件的人，預設都會在同一行呈現。
例如：Button、Input。
這時你會用到一個很好用的屬性，叫做 「inline-block 」，然後當你想要置中、置左、置右的時候，你可能就會想到：「啊！之前老師說 margin auto 可以拿來用了！」。
興奮地加上去之後．．．
天 打 雷 劈！怎麼沒用呢？
下面我給你一個例子喔：
然後你就會開始去 google，找到的答案不外乎就是：「要把他設定成 Block 元素，並且設定一個寬度給他。」，或是：「使用 position: absolute。」。
可是我就是想要他是 inline 元素啊！我想要他可以讓內容去決定他的寬度，而且不想用 position 讓他脫離文擋流。
很簡單，這時你只要在他的父層加上 display: flex，就解決囉！
當然你可能覺得有其他方法可以做到，但方法不嫌多，而且這個方法我個人覺得滿好用的。
Width 與 Flex-basis
再來要說的是 Width 跟 Flex-basis 的小差異，基本比較明顯的差異大概就是權重問題，以及在 flex-direction: column 模式下，width 會是代表寬度，flex-basis 則是會變成高度。
但我要說的是比較少人提到的：「當 Flex 的子元素也設定成 Flex，並且該子元素想透過內容設定 Flex-basis 去撐開父元素的話，父元素不會因此變寬。」。
不過上面這句實在太繞口了，簡單來說就是下面這樣：
那如果我們改成設定 width 呢？神奇的事情就發生了：
我認為不是說使用 width 比較好或是 flex-basis，而是看情境使用才是最正確的。
動態補滿高度（製作手機版常用到）
這個技巧真的非常好用，尤其是在做手機版的時候。
我們有時候會有需求要製作一個滿版的手機版格式，通常這種版面會有三塊主要區塊：「header、content、footer」，最經典的做法呢，就是固定 header 跟 footer 的高度，中間的 content 透過 padding 或是 calc 去計算出來。
如果有透過 CSS Preprocessor 去將 header 以及 footer 的高度定成變數，整個專案使用同一個 Reference 還不打緊，萬一沒有呢？就很容易造成改 A 壞 B 的情況，下面一樣舉個例子：
很明顯右邊的小美並不知道改了 header 跟 footer 的高度之後，還必須一併改 padding 的數值，這也造成了一個很嚴重的問題，就是小明跟小美已經曖昧很久都快在一起了，卻因為小美這一手弄壞了小明的傑作，導致他們吵架進而沒有繼續發展下去。
要怎麼避免同樣的慘劇再次發生呢？
那就是使用 flex-direction: column 加上 flex-grow，改造過後如下：
這下子無論怎麼改 header 或是 footer ，不僅畫面不會跑版，小明要建立後宮花園也是指日可待了。
Grid Gap
再來要說的是在 Grid 佈局中製作間距的方法，這其實也不算是 Flex 的技巧啦！只是我發現有很多人都是用 '硬調' 的方式來做，因此順便分享一下方法，這裡也會用 Flex 來做。
下面先舉例一個我很常看到，但後續維護非常困難的做法：
這個看起來好像是正常的沒錯，但這時 UI/UX 設計師可能會說：「間距應該要 28px 才對呀！」，這時就只能開始苦惱，要怎麼用％數算出 28px 還要加起來剛好 100%。
而且這種方式之後如果要改成 5 個一排或是 6 個一排，接手的工程師真的會很討厭你．．．
比較有維護性跟延展性的方式應該是多加一層結構並配合 margin 做出間距：
再配合 SCSS 的 Variable 就能做出更好維護的樣式囉！
Flex-shrink
這其實也不是什麼技巧，只是我個人很愛寫縮寫，導致有遇到一點小坑。
flex-basis: 25%; --> flex: 0 0 25%;
因此不小心把 Shrink 設成 0 了，就會導致下面的結果：
直接炸出父容器外面了．．．
因此在寫縮寫的時候一定要小心：
因為自己之前真的很常因為這個產生 Bug，所以分享一下。
以上就是這次分享的一些小技巧，如果有任何說錯或是說得不好的地方，再麻煩留言指正喔！！
