Flex 強大排版術:flex-direction 如何應用?主軸、交錯軸附圖解說!

網頁排版技術非常多,包含 floatinline-blockFlex 或是 grid 等等,其中 Flex 是現今滿常見的排版技術,使用這個技術,也能夠較為輕鬆地達到所謂的水平垂直置中,那要如何使用這項技術呢?這篇文章就來說明 Flex 其中一個屬性 flex-direction

為何要使用 Flex?

我想大家應該都有網購的經驗吧?就算沒有,我相信你也瀏覽過購物商城相關網站,商城內的商品在網頁上排排呈現,一行就有四到五個商品、接著有好幾行、可能又有好幾頁。剛好最近想買 Plain-me 的水桶包,所以就逛了一下 Plain-me 網站,就拿來當範例吧!(對了,這不是業配,我還要花錢去買 XDD)

Plain-me 網站:4*2 商品成列方式

可以看到這裡有一個 4*2 的商品陳列方式,假設我今天有四個商品,想以水平方式呈現在網站上,該怎麼做呢?我先來寫一段示範吧:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="wrap">
<h2 class="subTitle">商品列表</h2>
<ul class="products">
<li>
<img src="https://fakeimg.pl/250x250/#777" alt="商品">
<h3>Lorem, ipsum.</h3>
</li>
<li>
<img src="https://fakeimg.pl/250x250/#777" alt="商品">
<h3>Lorem, ipsum.</h3>
</li>
<li>
<img src="https://fakeimg.pl/250x250/#777" alt="商品">
<h3>Lorem, ipsum.</h3>
</li>
<li>
<img src="https://fakeimg.pl/250x250/#777" alt="商品">
<h3>Lorem, ipsum.</h3>
</li>
</ul>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
/* CSS Reset 語法(省略) */

.wrap {
width: 1200px;
margin: auto;
}
h2 {
font-size: 24px;
line-height: 1.5;
font-weight: bold;
margin-bottom: 8px;
}

這邊我們使用 .wrap 這個外容器包住裡面的副標題以及商品列表,並稍微設定了一下樣式,可以看到 Demo 為:

li 預設為區塊元素

這時候就會問號:咦?怎麼不會水平排列呢?

這部分可以參考我上次寫的文章「網頁版型控制不能不知道的事!區塊與行內元素、盒模型與容器」,有提到區塊元素的概念,因為 li 是一個區塊元素,所以會盡可能佔滿整個版面,因此儘管整個 li 並沒有這麼寬,仍然會排列至下一行。

加入 Flex:讓區塊排列於主軸

我們希望四個 li 能夠水平排列於一行,因此我們需要在 li 的父層加一段 CSS:

1
2
3
4
5
6
.products {
display: flex;
}
.products li {
padding: 10px; /* 加這一段是讓每個商品(li)間推擠出空格 */
}

設定為 flex 後,li 就能依照主軸進行排列

原本由上而下排列的眾多區塊元素們,竟然水平排列了!之所以會達成這個效果,主要是因為在 li 的父層加入 display: flex; 語法後,讓子層能夠依照主軸進行排列,這時候諸位可能會問:什麼是主軸呢?其實除了主軸,Flex 還有一個交錯軸的概念,接下來我們來介紹這兩個又是怎麼運作的。

不過為何要使用 Flex 呢?其實其它技術當然也是可以用於排版,但使用 Flex 可以非常快速且方便的進行排版,如果是初學者學習,我會非常推薦以 Flex 作為練習排版的起手式。

Flex 主軸與交錯軸的概念

Flex 分為所謂的主軸以及交錯軸,那這兩個又是什麼東西呢?我們可以想像成:假設有一家 OK 便利商店(為什麼是 OK 呢?因為以下俯視圖是想像我家附近 OK 畫出來的 XD),收銀檯前有三道走道,就像是這樣:

用便利商店看 Flex 資訊流向

我們可以看到,我們買好商品後,無論如何目的就是要前往收銀檯結帳,除非你想當小偷,不然一般來講從俯視圖來看,「從左到右」就是我們的主要流程,但同時基本上商店也會規畫一條可用於排隊的走道,以這間便利商店為例,商店內有三條走道,而他們訂走道一為排隊區域

用這張圖來看網頁

從上述邏輯也可以套用到我們的網頁上,一般來講我們看網頁的順序都是從左看到右,排版陳列方式也常是由左到右,而上述使用 Flex 的範例也能幫助我們將 li 由左到右排列,這就很像是主軸的概念,主軸就是代表我們的版面通常是從哪裡開始、到哪裡結束。而交錯軸的概念就像是超商圖內的走道一、走道二、走道三,可以決定這項資訊我希望他們水平排列,但要排在網頁上面位置、中間區域又或是接近底部。

透過 flex-direction 改變資訊流向

但有時候網頁的留下又不一定是由左而右,就像超商的走向也不一定像是我上述所說的那樣(這樣舉例好像不太對 XDD)沒關係我相信你懂我(自以為咧),於是透過 flex-direction 這項 CSS 屬性,可以做到改變 Flex 資訊流向,進而改變 Flex 主軸。

接下來我們一樣來示範一下設定 flex-direction 的效果,它的設定值分為以下四種:

  • flex-direction: row; 從左到右(預設)
  • flex-direction: row-reverse; 從右到左
  • flex-direction: column; 從上到下
  • flex-direction: column-reverse 從右到左

同樣的如果我們要對 li 進行作用,要將語法撰寫在父層的位置:

1
2
3
4
.products {
display: flex;
flex-direction: row | row-reverse | column | colymn-reverse;
}

從左到右 flex-direction: row;

首先我們來示範一下 flex-direction: row; 從左到右,並且為商品設定商品名稱來 Demo 給大家看,可以看到跟原本並無差別,因為資訊流預設就是從左到右,所以一般也不會特別去設定。

從左到右 flex-direction: row;

從右到左 flex-direction: row-reverse;

再來我們看從右到左的 row-reverse,設定後我們可以看到商品這行除了變成靠右對齊,重點是商品一到商品四也是從右到左,因為我們讓資訊流設定從右邊到左邊。

不過更精確的說法應該是:現在主軸的開始我們設定為右邊,因為是從主軸的開始來去排列,所以就會靠右對齊。(難道也可以對齊主軸的結尾嗎?其實也可以,不過就留待下一次再說,挖個坑 XD)

從右到左 flex-direction: row-reverse;

從上到下 flex-direction: column;

資訊流或是主軸就只能是水平走向嗎?當然不是,我們可以使用 column、column-reverse 等設定值,將主軸設定成垂直走向,同時原本的水平走向就會變成交錯軸。

將設定值設為 column,就能夠讓主軸由上而下排列:

從上到下 flex-direction: column;

從下到上 flex-direction: column-reverse;

相反的,flex-direction: column-reverse; 則會是由下而上排列:

從下到上 flex-direction: column-reverse;

對了,你可能會覺得它怎麼沒有靠下對齊,主要是因為父層區塊的高度是由內層內容或是區塊撐起,所以四個 li 高度加總加上 h2 標題就等於父層高度了。上述從右到左有靠右對齊是因為本身就佔滿整個版面的,所以自然而然會靠右對齊。

不過就還是補一下圖吧!我將高度設定為 300px 並加上背景色,就可以看到它是靠下對齊。(靠主軸開始對齊)

靠主軸開始對齊(此範例為靠下)

Flex 沒有繼承性

我們可以看到,雖然我們針對 .products 設定 Flex,但是 li 內的商品圖跟商品名也是由上而下排列。如果我希望商品圖在左、商品名在右,就必須要使用 Flex 包 Flex 的方式,來去做到此效果。

我們就用上一個使用 column-reverse 的範例,來修改並示範吧!

1
2
3
4
5
6
7
8
9
10
.products {
display: flex;
flex-direction: column-reverse;
background-color: pink;
height: 1500px;
}
.products li {
padding: 10px;
display: flex;
}

Flex 包 Flex

可以看到這樣就達成 Flex 包 Flex 效果了! (雖然主軸本來就不太會使用 column-reverse 就是了 XD)


希望我的文章能夠幫助到你,有任何問題或是想與我討論交流,歡迎透過留言與我分享你的觀點。

如果你喜歡我的文章,想支持我繼續撰寫更多文章,歡迎你:

  1. 將我的部落格加入書籤,隨時造訪部落格。
  2. 將我的文章分享給你的親朋好友。
  3. 透過 LikeButton 幫我按 5 下讚。
  4. 每月贊助 LikeCoin 請我喝杯咖啡。(雖然我不喝咖啡啦 XD)