上次製作了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也是一樣的道理,直接動手玩一次,能更了解每個屬性的用途,等到機會來臨,就可以輕鬆上手。