CSS Flexbox 彈性盒子

Flexbox (Flexible Box) 是一種一維的佈局模式，專門用於在容器中排列項目。它可以輕鬆實現水平或垂直排列、對齊、分配空間等佈局需求。

基本概念

Flexbox 佈局包含兩個角色：

• Flex 容器 (Container)：設定 display: flex 的父元素
• Flex 項目 (Items)：容器內的直接子元素

.container {
  display: flex;
}

<div class="container">
  <div class="item">項目 1</div>
  <div class="item">項目 2</div>
  <div class="item">項目 3</div>
</div>

主軸與交叉軸

• 主軸 (Main Axis)：項目排列的方向
• 交叉軸 (Cross Axis)：垂直於主軸的方向

預設主軸是水平的（從左到右），交叉軸是垂直的（從上到下）。

容器屬性

flex-direction

設定主軸方向，決定項目的排列方向。

.container {
  flex-direction: row;             /* 水平，從左到右（預設） */
  flex-direction: row-reverse;     /* 水平，從右到左 */
  flex-direction: column;          /* 垂直，從上到下 */
  flex-direction: column-reverse;  /* 垂直，從下到上 */
}

flex-wrap

設定項目是否換行。

.container {
  flex-wrap: nowrap;       /* 不換行（預設），項目可能被壓縮 */
  flex-wrap: wrap;         /* 換行 */
  flex-wrap: wrap-reverse; /* 換行，但從下往上 */
}

flex-flow

flex-direction 和 flex-wrap 的縮寫。

.container {
  flex-flow: row wrap;
}

justify-content

設定項目在「主軸」上的對齊方式。

.container {
  justify-content: flex-start;    /* 靠起點對齊（預設） */
  justify-content: flex-end;      /* 靠終點對齊 */
  justify-content: center;        /* 置中 */
  justify-content: space-between; /* 兩端對齊，項目間等距 */
  justify-content: space-around;  /* 項目兩側等距 */
  justify-content: space-evenly;  /* 所有間距相等 */
}

align-items

設定項目在「交叉軸」上的對齊方式。

.container {
  align-items: stretch;     /* 拉伸填滿（預設） */
  align-items: flex-start;  /* 靠起點對齊 */
  align-items: flex-end;    /* 靠終點對齊 */
  align-items: center;      /* 置中 */
  align-items: baseline;    /* 文字基線對齊 */
}

align-content

當有多行時，設定行與行之間的對齊方式。只在 flex-wrap: wrap 且有多行時生效。

.container {
  flex-wrap: wrap;
  align-content: flex-start;    /* 靠起點對齊 */
  align-content: flex-end;      /* 靠終點對齊 */
  align-content: center;        /* 置中 */
  align-content: space-between; /* 兩端對齊 */
  align-content: space-around;  /* 行間等距 */
  align-content: stretch;       /* 拉伸填滿（預設） */
}

gap

設定項目之間的間距。

.container {
  gap: 20px;              /* 行列間距相同 */
  gap: 20px 10px;         /* 行間距 列間距 */
  row-gap: 20px;          /* 只設行間距 */
  column-gap: 10px;       /* 只設列間距 */
}

實用範例

水平置中

.container {
  display: flex;
  justify-content: center;
}

垂直置中

.container {
  display: flex;
  align-items: center;
  height: 100vh;
}

水平垂直置中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

導航列

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.nav-links {
  display: flex;
  gap: 24px;
}

卡片列表

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px;    /* 最小寬度 300px，可伸縮 */
  max-width: 400px;
}

等分佈局

.equal-columns {
  display: flex;
}

.equal-columns > * {
  flex: 1;    /* 等分空間 */
}

靠右對齊最後一個項目

.header {
  display: flex;
  align-items: center;
}

.header .logo {
  margin-right: auto;    /* 推開右側項目 */
}

底部固定

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-body {
  flex: 1;    /* 佔據剩餘空間 */
}

.card-footer {
  margin-top: auto;    /* 推到底部 */
}

display: inline-flex

讓 flex 容器本身表現為行內元素：

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

常用佈局模式

Flex 項目的詳細屬性請參考 CSS Flex 項目屬性。