老實說我到現在都還沒開始用 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 的文件喔！

常用的 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 該怎麼寫的話，也可以留言給我唷！

1

發生錯誤。