MUKI AI Summary
Flexbox 是一種 CSS 排版語法,屬於 CSS3 新增內容,與傳統的 position、float、display 不同,具有更高的彈性,能解決複雜的排版問題。使用 flex 前,需在容器設置 display: flex,行內元素則用 display: inline-flex。Flexbox 的屬性分為影響容器與項目兩類,需注意屬性使用位置。
Flexbox 的核心屬性包含 flex-grow、flex-shrink、flex-basis,分別用來調整項目寬度、壓縮比例與初始尺寸。flex 是這三個屬性的合併縮寫。常見的應用有版面垂直置中、動態三欄式結構等,透過 flex 的屬性可靈活調整排版。...
老實說我到現在都還沒開始用 flex
做網站,最大的原因就是 IE 相容問題,不過這也不能當作不學習的原因,畢竟這行就是要不斷的學習新知識😂,而且剛好在某次前端課程中有同學問我能否介紹 flex
,所以想想,乾脆就寫一篇文章吧!不僅是幫自己做個筆記,以後也可以當作課堂上的補充講義~。
▼ flex 相容一覽圖 / caniuse.com
什麼是 Flexbox
簡單來說,Flexbox 是一種 CSS 的排版語法,就跟我們以往用的 position
, float
, display
...一樣,只是 Flexbox 是 CSS3 的新語法,所以才有瀏覽器相容的問題。
Flexbox 相關屬性與值
我覺得 Flexbox 較難上手的原因,就是他的屬性跟值太多了,不像 float
很單純的只有 left
, right
, none
這三種,但當然好處就是彈性非常大,幾乎很多複雜的排版都可以靠 Flexbox 輕鬆解決。
在這邊也參考了 W3C 的網站,列出所有 flexbox 的屬性跟值給大家參考,至於詳細的介紹還是可以看 W3C 關於 Flexbox 的文件喔!
屬性 | 屬性介紹 | 可用的值 | 預設值 | 影響 |
---|---|---|---|---|
flex-flow | 將 flex-direction 以及 flex-wrap 合併寫在一起 | flex-direction |flex-wrap | flex containers | |
flex-direction | 排列方向 | row | row | flex containers |
row-reverse | ||||
column | ||||
column-reverse | ||||
flex-wrap | 換行 | nowrap | nowrap | flex containers |
wrap | ||||
wrap-resverse | ||||
order | 調整元素排列的順序 | <整數> | 0 | |
flex | 將 flex-grow、flex-shrink 以及 flex-basis 合併寫在一起 | flex-grow|flex-shrink|flex-basis | flex items | |
flex-grow | <數字> | 0 | flex items | |
flex-shrink | <數字> | 1 | flex items | |
flex-basis | <寬度> | auto | flex items | |
justify-content | 水平對齊設定 | flex-start | flex-start | flex containers |
flex-end | ||||
center | ||||
space-between | ||||
space-around | ||||
align-items | 垂直對齊 (元素單行排列) | flex-start | stretch | flex containers |
flex-end | ||||
center | ||||
baseline | ||||
stretch | ||||
align-self | flex-start | auto | flex items | |
flex-end | ||||
center | ||||
baseline | ||||
strech | ||||
align-content | 垂直對齊 (元素排列超過兩行以上) | flex-start | stretch | 多行 flex containers |
flex-end | ||||
center | ||||
space-between | ||||
space-around | ||||
stretch |
常用的 Flexbox 排版語法
要使用 flex 前,必須先在該容器指定:
div { display: flex; }
而特別有趣的是,就連行內元素都可以用 flex 唷:
div { display: inline-flex; }
接下來,我們用一小段 HTML 語法表示 Flexbox 的架構:
<div class="flex-container"> <div class="flex-item">內容 A</div> <div class="flex-item">內容 B</div> <div class="flex-item">內容 C</div> <div class="flex-item">內容 D</div> </div>
承上,這個很常見的巢狀排版恰恰能表達flex
的兩大主角:flex-container
以及 flex-item
,前者表示的是一個巨大的容器(container),後者則是各個獨立的項目(item)。
flex
的屬性,有的會影響的是容器,有的則影響項目。如果不太清楚屬性影響的是哪一塊,可以看前述表格的「影響」欄位做參考。
基本的 Flexbox 排版
flex-direction
我們先介紹最簡單的左右版面,以往直接用 float: left
解決,那麼換成 flex
的話可以這麼寫:
.flex-container { display: flex; flex-direction: row-reverse; }
Flexbox 是 Box Model 的一種表現形式,以前我們用 display
去改變每個元素的 Box Model,在此也是一樣,我們要在 flex-container
先設定 display: flex
,確保自己以及裡面的子元素 Box Model 都會轉成 flex
的設定。
而 flex-direction
表示 flex 的水平排列方向,表格上有提到,flex-direction
必須放在 flex container 的父層架構下,而不是 flex item 這個子層,所以這句話寫在 .flex-container
裡,如果你把它放在 .flex-item
會發現沒作用。(再次提醒:對照屬性表會更加清楚該放在哪裡喔。)
最後我們來把flex-direction
所有的值都寫一遍吧!
See the Pen QEGbMm by MUKi (@mukiwu) on CodePen.
在值裡面,用到的 row
跟 column
,一個是水平排列、一個是垂直排列;而 reverse
是反轉的意思,稍微對照一下上面的範例應該不難了解唷!
flex-wrap
接下來再加一個新的語法 flex-wrap
,這個同樣要放在 .flex-container
裡面,wrap
是斷行的意思,可以利用這個語法決定是否要換行。
設定 nowrap
表示即使有多少區塊,也必須都放在同一行內(會自動分配寬度)。設定 wrap
則是會依照內容或寬度自動換行。
See the Pen oLYjqG by MUKi (@mukiwu) on CodePen.
flex
是三個屬性的合併縮寫:flex-grow
, flex-shrink
, flex-basis
,可以看作是 Flexbox 的核心設定。
註:flex 的這些屬性影響的是 flex items。
flex-grow
我們都知道,區塊預設的寬度是元素內容的寬度,如下圖所示:
如果想要調整寬度,一般可以用 width
設定,但也能用 flex-grow
唷!flex-grow
的預設值為 0,表示寬度就是元素內容的寬。而從 1
開始,數字愈大,占的寬度比例也會愈大。
.grow1 { flex-grow: 2;} .grow2 { flex-grow: 2;} .grow3 { flex-grow: 1;} .grow4 { flex-grow: 0;}
▼ 如下所示
flex-shrink
flex-shrink
跟 flex-grow
相反,是表示當父元素寬度空間不足時,子元素壓縮的比例。預設值為 1,但設為 0 同樣表示不壓縮,數字愈大,被壓縮的幅度就愈大。
.shrink1 { width: 50%; flex-shrink: 2;} .shrink2 { width: 50%; flex-shrink: 2;} .shrink3 { width: 50%; flex-shrink: 1;} .shrink4 { width: 50%; flex-shrink: 0;}
▼ 如下所示
flex-basis
可以在 flex-basis
設定寬度或高度,設定好後會自動分配該區塊的寬度或高度。
.basis1 { flex-basis: 200px;} .basis2 { flex-basis: 600px;}
假設父元素寬度是 500px
,我在裡面設了兩個子元素分別為 200px
以及 600px
,他會依照比例分別給予子元素寬度
以上這三個語法因為有比較多的彈性,所以可以用在製作 RWD 網站上。
flex
最後,再次提到 flex
這個語法,是用來合併以上三個屬性,規格為:
flex: flex-grow|flex-shrink|flex-basis
flex 還有兩個更簡短的縮寫:
/* 以下兩個相同 */ .flex { flex: auto flex: 1 1 auto; } /* 以下兩個相同 */ .flex { flex: none; flex: 0 0 auto; }
▼ 範例參考
Flex 版面實例介紹
版面垂直置中
在這邊我們會用到兩個屬性:
justify-content
align-items
.flex-container { height: 400px; display: flex; justify-content: center; align-items: center; }
範例請參考 codepen:
動態三欄式
除了用 flex-grow
動態調整他們的大小外,還用了 order
調整版面的順序
不同的圖片 / 區塊排列
這種排版變化比較多一點,但不知道怎麼稱呼它,所以直接看範例比較清楚 XDDD。
一樣是大量運用到 flex
屬性做調整,在這個例子中,flex-basis
尤其為最重要,當然還有一些對齊的語法也不能少。以下是有用到的語法:
flex-wrap
flex-basis
justify-content
以上三種排版,是我目前想到可能比較有趣,或是比較實際的例子 XD,如果有特別想要了解某些版面換成 flex
該怎麼寫的話,也可以留言給我唷!