Skip to main content

Flex

CSS Flexbox（Flexible Box Layout）是一種排版方式，讓排版、對齊和分配項目之間的空間更有效率。

概念​

  1. 容器 Container 和子元素 Items

    container

  2. 主軸 Main axis 與 交叉軸 Cross axis

    主軸是 Flex 容器的主要排列方向，可以是水平或垂直的。交叉軸則是與主軸垂直的排列方向。主軸由 flex-direction 屬性定義，可以是水平或是垂直

  3. 主軸對齊和交叉軸對齊 justify-content 屬性控制 Flex 元素在主軸上的對齊方式，align-items 則控制 Flex 元素在交叉軸上的對齊方式

  4. 彈性增長和縮小 透過 flex-grow 和 flex-shrink 屬性根據可用空間自動增長或縮小

  5. 彈性元素排序

    透過 order 屬性重新排列

容器屬性​

  • display：指定容器的排版類型，可以是 flex、inline-flex Flex display

  • flex-direction：指定主軸的方向，可以是 row（水平，默認值）、row-reverse（水平反向）、column（垂直）或 column-reverse（垂直反向）

Flex direction

  • flex-wrap：指定子元素是否換行，可以是 nowrap（不換行，默認值）、wrap（換行）或 wrap-reverse（反向換行）

Flex wrap

  • justify-content：控制 Flex 元素在主軸上的對齊方式，可以是 flex-start、flex-end、center、space-between（平均分布，首尾元素靠邊）或 space-around（平均分布，首尾元素有空隙）等

Flex justify-contents

  • align-items：控制 Flex 元素在交叉軸上的對齊方式，可以是 flex-start、flex-end、center、baseline（按文字基線對齊）或 stretch（拉伸至容器高度）等

Flex align-items

  • align-content：當有多行 Flex 元素時，控制各行在交叉軸上的對齊方式，可以是 flex-start、flex-end、center、space-between、space-around 或 stretch 等。 Flex align-content

  • gap: 設定子元素之間的間距，以及主軸或交叉軸上的元素間距，可以透過 gap、column-gap 或 row-gap 設定

Flex gap

  • flex: flex-grow, flex-shrink 和 flex-basis 可以一起使用，預設為 0 1 auto(等於 initial)。
.flex-item {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

flex 其他常見的設定及使用情境如下：

  1. flex: auto 等於 flex: 1 1 auto，元素會均等地增長和縮小，並保持其自然的大小（由 flex-basis 決定），通常用於元素需要填滿容器並按比例伸展或縮小的情況
  2. flex: none 等於flex: 0 0 auto，元素不會收縮也不會擴展，它將保持其自然的大小（由 flex-basis 決定）
  3. flex: 1 等於 flex: 1 1 0%，元素會在增加的可用空間中均等地增長，並在需要時均等地縮小，以填滿或適應容器
  4. flex: 0
  5. 等於flex: 0 1 0% ，元素不會增長，但在需要時會縮小以適應容器的空間

子元素屬性​

  1. order: 預設每個子元素的 order 為 0，數值小的元素排在前面。

Flex order

  1. flex-grow：指定元素在可用空間中擴展的比例。如果所有子元素都具有相同的 flex-grow 值，它們將等分可用空間。預設為 0 (不會擴展)

Flex grow

  1. flex-shrink: 指定元素在空間不足時收縮的比例。如果所有子元素都具有相同的 flex-shrink 值，它們將等分可用空間。預設值為 1 。當數值為 0 時，則元素不會收縮。

Flex shrink

  1. flex-basis：指定元素的基本大小，預設值為 auto(基於元素內容，若無內容則基於其寬度、高度)，值可以是一個固定的 px，也可以是相對值，如百分比。它確定了元素在可用空間中的起始大小。

Flex basis

  1. align-self ：控制單個子元素的交叉軸對齊方式，可以覆蓋父容器的 align-items 屬性。可用值包括 flex-start、flex-end、center、baseline 和 stretch 等。

Align self

參考資料：​