CSS 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 的水平排列方向,第一頁的 Flexbox 屬性表上有提到,flex-direction必須放在 flex container 的父層架構下,而不是 flex item 這個子層,所以這句話寫在.flex-container裡,如果你把它放在.flex-item會發現沒作用。(再次提醒:對照屬性表會更加清楚該放在哪裡喔。)

最後我們來把flex-direction所有的值都寫一遍吧!

See the Pen QEGbMm by MUKi (@mukiwu) on CodePen.

在值裡面,用到的rowcolumn,一個是水平排列、一個是垂直排列;而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-shrinkflex-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: auto
flex: 1 1 auto;

/* 以下兩個相同 */
flex: none;
flex: 0 0 auto;

以上關於flex的範例程式碼,請參考:http://codepen.io/mukiwu/pen/qNRJPv


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

最後一章節,放上幾個用 Flex 做成的排版給大家參考,有興趣的朋友請繼續往下閱讀囉!