CSS Flexbox 介紹與解析

Intro

老實說我到現在都還沒開始用 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-wrapflex containers
flex-direction
排列方向
rowrowflex containers
row-reverse
column
column-reverse
flex-wrap
換行nowrapnowrapflex containers
wrap
wrap-resverse
order
調整元素排列的順序<整數>0
flex
將 flex-grow、flex-shrink 以及 flex-basis 合併寫在一起flex-grow|flex-shrink|flex-basisflex items
flex-grow
<數字>0flex items
flex-shrink<數字>1flex items
flex-basis<寬度>autoflex items
justify-content
水平對齊設定flex-startflex-startflex containers
flex-end
center
space-between
space-around
align-items
垂直對齊 (元素單行排列)flex-startstretchflex containers
flex-end
center
baseline
stretch
align-selfflex-startautoflex items
flex-end
center
baseline
strech
align-content
垂直對齊 (元素排列超過兩行以上)flex-startstretch多行 flex containers
flex-end
center
space-between
space-around
stretch