以前我切版最愛用 Float ，但常常在一些區塊會無法彈性伸縮，現在在了解完 Flex 屬性後，發現 CSS 的世界真是廣大呀！哈~~~
Flex 屬性要套用的第一點，要記得它分為「外框元件」和「內元件」，感覺就像是 table 和 td 的關係，兩者缺一不可。
第一步要做的就是，將外框元件設定 display: flex; 沒有做這個設定，後續的設定都白搭。
因為這裡會有很多不同的情況，所以我先大略設定一個情況：一組外框元件600px寬度、和三個內元件A、B、C
接下來就是針對「外框元件」的相關設定：
- flex-direction: row（橫式左往右） | row-reverse（橫式右往左） | column（直式上往下） | column-reverse（直式下往上）
- flex-wrap: nowrap（超出範圍換行） | wrap（超出範圍不換行） | wrap-reverse（超出範圍換行時反轉）
- justify-content(水平對齊): flex-start（靠左） | flex-end（靠右） | center（置中） | space-between（左右均分，但內容寬度不變） | space-around（左右均分、內容寬度不變，但最左和最右有間距）
- align-items（垂直對齊): flex-start（靠上） | flex-end（靠下） | center（置中） | baseline（第一行文字的底部對齊） | stretch（上下均分置中，區塊會撐開)
- align-content（垂直對齊多行版，但需要先設定 flex-wrap: wrap 才會有用）: flex-start（靠上) | flex-end（靠下） | center（置中） | space-between（上下均分置中，區塊不會撐開） | space-around（上下均分置中，區塊不會撐開、但最上和最下會有間距） | stretch（上下均分置中，區塊會撐開）
「內元件」的相關設定：
- flex-grow（剩餘空間給元件的伸展性）: 0（預設值，都不伸展） | 1（剩餘空間分為1份做伸展），如果有兩個元件皆設定 flex-grow:1，代表剩餘空間分為2份做伸展，未設定的元件就不列入伸展
例如：
外空間為1000px，裡面包著A、B、C三個區塊，每個區塊寬度為100px，當A區塊為 flex-grow:1; 時，剩餘空間700px則分為1份給A，所以A為800px，B和C為100px；若A、B區塊為 flex-grow:1; 時，剩餘空間700px則分為2分給A和B，所以A與B為450px，C為100px，以此類推。
當外空間的寬度不同時，剩餘空間也會不同，分配到的寬度也不同。
- flex-shrink（不夠空間時指定給元件的縮放性）：1（預設值，皆會縮放） | 0（皆不縮放）
例如：
外空間為1000px，裡面包著A、B、C三個區塊，每個區塊寬度為400px，當A區塊為 flex-shrink:0; 時，不足空間200px則視為1等份從A扣除，所以A為200px，B和C為400px；若A、B區塊為 flex-shrink:0; 時，不足空間200px則視為2等份從A和B一起扣除，所以A與B為30px，C為400px，以此類推。
當外空間的寬度不同時，不足空間也會不同，壓縮的寬度也不同。
- flex-basis（預設分配到的空間）
例如：
外空間為1000px，裡面包著A、B、C三個區塊，每個區塊寬度為200px，當A區塊為 flex-basis:400px; 時，其寬度會覆蓋原本的200px，成為了400px
- order（排列順序）
- align-self（調整元件內交錯軸的對齊設定）