CSS Flexbox 介紹與解析

日期：2016.06.27
留言數：0
標籤：css 語法 CSS3 flex RWD 原創教學觀念

老實說我到現在都還沒開始用 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 的水平排列方向，第一頁的 Flexbox 屬性表上有提到，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的範例程式碼，請參考：http://codepen.io/mukiwu/pen/qNRJPv

Flexbox 還有一些屬性沒有提到，因為~~我有點累了~~，所以暫時解說到這邊。但我覺得剩下的都是比較簡單而且很容易上手的語法，所以等待以後有空補完 XDD。

Flex 版面實例介紹

版面垂直置中

幾千萬年以來傷透腦筋的垂直置中，超級適合用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該怎麼寫的話，也可以留言給我唷！