第 361 篇 · 第 14 卷 前端，沒有極限 2026 年 6 月 9 日 · 台北
ls -lt ./posts --since=2013 REC · node 361 · uplink

css

圖解：CSS Flex 屬性一點也不難

2017 年 07 月 21 日 · 4 分鐘閱讀 · By Wang Casper

前幾篇有介紹過 CSS Grid Layout 的使用方法，當我們學習排版類型的 CSS 時，最好的方式是先作分類，以 Flex 與 Grid Layout 來說都有共同的特徵，就是他們有分為外容器屬性與內元件屬性。

Flex 的外容器與內元件

屬性放錯地方就沒有作用(廢話)，學習的過程中如果可以先了解正確的擺放位置，可以減少許多除錯的時間；Flex 中分為外容器與內元件，下方這張圖就是解釋這兩個的差異。

Flex 外容器屬性：

  • display
  • flex-flow
    • flex-direction
    • flex-wrap
  • justify-content
  • align-items

Flex 內元件屬性：

  • flex
    • flex-grow
    • flex-shrink
    • flex-basis
  • order
  • align-self

類別分清楚，至少在練習的時候已經對了一半，接下來就可以開始做屬性的練習與介紹。

外容器

display

一開始要宣告為 flex 才能使用，如果沒有宣告為 flex，本篇大部分的屬性都無法作用，不過除了 flex 外，還有一個 inline-flex，作用類似於 inline-block + flex。

.flex-container {
  display: flex | inline-flex;
}

flex-direction

Flex 決定內元件排序方向的重要屬性，這也直接影響了 flex 的軸線 (主軸及交錯軸)，flex 中的對齊屬性都與此有很大的相關聯，下圖中是預設狀態的軸線方向。

flex-direction 就是來改變上圖中的軸線方向，可以將軸線做水平反轉、轉為垂直、垂直反轉等，下圖是四種軸線排列的示意圖：

.flex-container {
  flex-direction: row | row-reverse | column | column-reverse;
}

這個範例則是將主軸線設定為垂直的方向，所以 flex 的內容都是以垂直做排列。

可點擊 Edit on Codepen 自己玩看看更了解：

See the Pen Flex 介紹 (flex-direction) by Wcc723 (@Wcc723) on CodePen.

flex-wrap

超出範圍時是否換行的屬性，分為換行、不換行、換行時反轉。

.flex-container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

可點擊 Edit on Codepen 自己玩看看更了解：

See the Pen Flex 介紹 (flex-wrap) by Wcc723 (@Wcc723) on CodePen.

flex-flow

這僅僅是 flex-direction 與 flex-wrap 的縮寫，所以只要在這前後帶上相對應的值即可。

.flex-container {
  flex-flow: <'flex-direction'> || <'flex-wrap'>
}

justify-content

這個屬性和下方屬性很像，很接近水平對齊的設定，但嚴格說來是稱為主軸對齊，主軸的設定是上方的 flex-direction；所以實際是水平或垂直，要依主軸的方向而定喔。

.flex-container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items

相對於上一個屬性，這是交錯軸的對齊設定。

.flex-container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

可點擊 Edit on Codepen 自己玩看看更了解：

See the Pen Flex 介紹 (flex-justify) by Wcc723 (@Wcc723) on CodePen.

align-content

上一個屬性的多行版本，排列方式也有多一些，但注意 stretch 在高度被限制的情況下不會正常伸展。

.flex-container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

可點擊 Edit on Codepen 自己玩看看更了解：

See the Pen Flex 介紹 (align-content) by Wcc723 (@Wcc723) on CodePen.

內元件

內元件的設定其中之一 flex 是這當中最特別的，只要搞懂 flex 的設定就了解了 flex 最困難的部分，所以我們就從這部份開始介紹喔。

flex

flex 是縮寫，裡面依序包含三個屬性 flex-grow、flex-shrink 和 flex-basis，如果只設定一個則是 flex-grow。

  • flex-grow: 元件的伸展性，是一個數值，當空間分配還有剩餘時的當前元件的伸展性，預設值為 0，如果設置為 0 則不會縮放。
  • flex-shrink: 元件的收縮性: 元件的伸展性，是一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 1，如果設置為 0 則不會縮放。
  • flex-basis: 元件的基準值，可使用不同的單位值。

以下圖為例，伸展值為 2 的空間會佔更多。

可點擊 Edit on Codepen 自己玩看看更了解：

See the Pen Flex 介紹 (flex) by Wcc723 (@Wcc723) on CodePen.

align-self

align-self 可以調整內元件交錯軸的對齊設定(主軸線則不能另外做設定)，且可以個別設定單一元件的值。

See the Pen Flex 介紹 (align-self) by Wcc723 (@Wcc723) on CodePen.

Order

這是一個相當特別的屬性，可以重新定義元件的排列順序，順序會依據數值的大小排列。

See the Pen Flex 介紹 (order) by Wcc723 (@Wcc723) on CodePen.

和過去不同，Flex 已經是主流的 CSS 屬性，現在許多 CSS 框架也都是使用 Flex 來作網格排版。搭配著範例，動手玩玩看能夠更快速的了解 Flex 喔。

延伸介紹：Flex 空間計算規則

css