前幾篇有介紹過 CSS Grid Layout 的使用方法,當我們學習排版類型的 CSS 時,最好的方式是先作分類,以 Flex 與 Grid Layout 來說都有共同的特徵,就是他們有分為外容器屬性與內元件屬性。
Flex 的外容器與內元件
屬性放錯地方就沒有作用(廢話),學習的過程中如果可以先了解正確的擺放位置,可以減少許多除錯的時間;Flex 中分為外容器與內元件,下方這張圖就是解釋這兩個的差異。
Flex 外容器屬性:
- display
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
Flex 內元件屬性:
- flex
- flex-grow
- flex-shrink
- flex-basis
- order
- align-self
類別分清楚,至少在練習的時候已經對了一半,接下來就可以開始做屬性的練習與介紹。
外容器
display
一開始要宣告為 flex
才能使用,如果沒有宣告為 flex
,本篇大部分的屬性都無法作用,不過除了 flex
外,還有一個 inline-flex
,作用類似於 inline-block
+ flex
。
.flex-container {
display: flex | inline-flex;
}
flex-direction
Flex 決定內元件排序方向的重要屬性,這也直接影響了 flex 的軸線 (主軸及交錯軸),flex 中的對齊屬性都與此有很大的相關聯,下圖中是預設狀態的軸線方向。
flex-direction
就是來改變上圖中的軸線方向,可以將軸線做水平反轉、轉為垂直、垂直反轉等,下圖是四種軸線排列的示意圖:
.flex-container {
flex-direction: row | row-reverse | column | column-reverse;
}
這個範例則是將主軸線設定為垂直的方向,所以 flex 的內容都是以垂直做排列。
可點擊 Edit on Codepen 自己玩看看更了解:
See the Pen Flex 介紹 (flex-direction) by Wcc723 (@Wcc723) on CodePen.
flex-wrap
超出範圍時是否換行的屬性,分為換行、不換行、換行時反轉。
.flex-container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
可點擊 Edit on Codepen 自己玩看看更了解:
See the Pen Flex 介紹 (flex-wrap) by Wcc723 (@Wcc723) on CodePen.
flex-flow
這僅僅是 flex-direction
與 flex-wrap
的縮寫,所以只要在這前後帶上相對應的值即可。
.flex-container {
flex-flow: <'flex-direction'> || <'flex-wrap'>
}
justify-content
這個屬性和下方屬性很像,很接近水平對齊的設定,但嚴格說來是稱為主軸對齊,主軸的設定是上方的 flex-direction
;所以實際是水平或垂直,要依主軸的方向而定喔。
.flex-container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
align-items
相對於上一個屬性,這是交錯軸的對齊設定。
.flex-container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
可點擊 Edit on Codepen 自己玩看看更了解:
See the Pen Flex 介紹 (flex-justify) by Wcc723 (@Wcc723) on CodePen.
align-content
上一個屬性的多行版本,排列方式也有多一些,但注意 stretch
在高度被限制的情況下不會正常伸展。
.flex-container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
可點擊 Edit on Codepen 自己玩看看更了解:
See the Pen Flex 介紹 (align-content) by Wcc723 (@Wcc723) on CodePen.
內元件
內元件的設定其中之一 flex
是這當中最特別的,只要搞懂 flex
的設定就了解了 flex 最困難的部分,所以我們就從這部份開始介紹喔。
flex
flex 是縮寫,裡面依序包含三個屬性 flex-grow
、flex-shrink
和 flex-basis
,如果只設定一個則是 flex-grow
。
- flex-grow: 元件的伸展性,是一個數值,當空間分配還有剩餘時的當前元件的伸展性,預設值為
0
,如果設置為 0 則不會縮放。 - flex-shrink: 元件的收縮性: 元件的伸展性,是一個數值,當空間分配還不足時的當前元件的收縮性,預設值為
1
,如果設置為 0 則不會縮放。 - flex-basis: 元件的基準值,可使用不同的單位值。
以下圖為例,伸展值為 2 的空間會佔更多。
可點擊 Edit on Codepen 自己玩看看更了解:
See the Pen Flex 介紹 (flex) by Wcc723 (@Wcc723) on CodePen.
align-self
align-self
可以調整內元件交錯軸的對齊設定(主軸線則不能另外做設定),且可以個別設定單一元件的值。
See the Pen Flex 介紹 (align-self) by Wcc723 (@Wcc723) on CodePen.
Order
這是一個相當特別的屬性,可以重新定義元件的排列順序,順序會依據數值的大小排列。
See the Pen Flex 介紹 (order) by Wcc723 (@Wcc723) on CodePen.
和過去不同,Flex 已經是主流的 CSS 屬性,現在許多 CSS 框架也都是使用 Flex 來作網格排版。搭配著範例,動手玩玩看能夠更快速的了解 Flex 喔。
延伸介紹:Flex 空間計算規則