css
動手玩 CSS，快速學會Flex
上次製作了CSS column的範例，對於學習CSS column可以快速地瞭解(但實際運用相信坑非常多)，這次用angular製作了flex的範例，讓大家透過動手玩來快速瞭解這是怎樣的坑。
簡單範例
在學理論之前，我們先動手玩一次，再來理解各個屬性的用途。而這份範例分為上下兩部分，上部分是Flex 的外容器，下半部是Flex 元件的設定。
Flex 容器
Flex的容器，這部分選項較少，這範例是反覆測試後，認為比較有明顯效果的。
Flex 屬性
align-items
這物件垂直對齊的屬性
- flex-start : 緊靠起始的邊界
- flex-end : 靠近終點的邊界
- center : 對齊中間
- baseline : 對齊基線 (line-height)
- stretch : 延展 (本範例不適合)
justify-content
這是物件水平對齊的屬性
- flex-start : 緊靠起始的邊界
- flex-end : 靠近終點的邊界
- center : 對齊中間
- space-between : 平均分配空間
- space-around : 平均分配空間，且包含與邊界的距離
- stretch : 延展 (本範例不適合)
flex-direction
決定物件的排列方向
- row : 水平
- row-reverse : 水平反轉
- column : 垂直
- column-reverse : 垂直反轉
flex-wrap
容器的換行模式，在本範例需縮小視窗。
- nowrap : 堅決不換行
- wrap : 如果超過空間就換行
- wrap-reverse : 換行還要後面的往前排 (請縮小視窗)
Flex 元件
這部分可以自由增減元件，試著去調整每個元件的屬性，或者配合外容器，看看彼此之間的關係。
Flex 屬性
flex
這個屬性在本範例並沒有列出來，他其實是包含了以下三個屬性。
<'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
所以在本範例中，就直接提供以下三個屬性的各別調整。
flex-basis
flex屬性的基準值，值可以是各種單位數值，如10px、10%、10vh。
但如果沒有單位，僅有數值，那代表的是等份，如有三個元件的flex-basis分別為 1、1、2，那麼他們分別的大小則為 四分之一、四分之一、四分之二。
flex-grow
flex-grow、flex-shrink，建議調整視窗大小玩看看。
元件的伸展比率，預設值為1，如果說設定為0，代表元件尺寸不會大於flex-basis的值。
flex-shrink
元件的收縮比率，預設值為1，如果說設定為0，代表元件尺寸不會小於flex-basis的值。
所以flex-grow、flex-shrink都設定為0，代表元件不會縮放。
align-self
和外容器的align-items的屬性類似，但是只能控制元件本身的對齊。
結語
以前有寫過Flex文章，有些時候偷懶都會用flex來排垂直置中的物件，而上次製作了css column，就會引發更多的思考，column可以拿來排什麼；這次的flex也是一樣的道理，直接動手玩一次，能更了解每個屬性的用途，等到機會來臨，就可以輕鬆上手。