CSS Flex 項目屬性

Flex 項目（容器內的子元素）有專屬的屬性，用來控制自身的伸縮行為和對齊方式。

flex-grow

設定項目的「伸展比例」，決定如何分配容器的剩餘空間。

.item {
  flex-grow: 0; /* 不伸展（預設） */
  flex-grow: 1; /* 伸展，佔據剩餘空間 */
  flex-grow: 2; /* 伸展比例是 1 的兩倍 */
}

範例：分配空間

.container {
  display: flex;
}

.item-a {
  flex-grow: 1;
} /* 佔 1/4 */
.item-b {
  flex-grow: 2;
} /* 佔 2/4 */
.item-c {
  flex-grow: 1;
} /* 佔 1/4 */

flex-shrink

設定項目的「收縮比例」，決定空間不足時如何縮小。

.item {
  flex-shrink: 1; /* 允許收縮（預設） */
  flex-shrink: 0; /* 不收縮 */
  flex-shrink: 2; /* 收縮比例是 1 的兩倍 */
}

範例：防止收縮

.sidebar {
  flex-shrink: 0; /* 側邊欄不縮小 */
  width: 250px;
}

.main {
  flex-shrink: 1; /* 主內容可以縮小 */
}

flex-basis

設定項目的「基礎大小」，在分配剩餘空間之前的初始大小。

.item {
  flex-basis: auto; /* 根據內容或 width/height（預設） */
  flex-basis: 0; /* 完全依賴 flex-grow 分配 */
  flex-basis: 200px; /* 固定基礎大小 */
  flex-basis: 30%; /* 百分比 */
}

flex-basis vs width

• flex-basis 優先於 width（在主軸方向）
• flex-basis: auto 時會參考 width 的值

/* flex-basis 會覆蓋 width */
.item {
  width: 100px;
  flex-basis: 200px; /* 實際使用 200px */
}

flex 縮寫

flex 是 flex-grow、flex-shrink、flex-basis 的縮寫。

.item {
  flex: 0 1 auto; /* 預設值：不伸展、可收縮、自動大小 */
  flex: 1; /* 等同於 flex: 1 1 0 */
  flex: auto; /* 等同於 flex: 1 1 auto */
  flex: none; /* 等同於 flex: 0 0 auto */
  flex: 1 1 200px; /* grow shrink basis */
}

常用值

order

設定項目的排列順序，數值越小越前面。

.item-a {
  order: 2;
}
.item-b {
  order: 1;
} /* 會排在 item-a 前面 */
.item-c {
  order: 3;
}

預設 order 值是 0，可以使用負值。

.first {
  order: -1; /* 排到最前面 */
}

align-self

覆蓋容器的 align-items，設定單一項目在交叉軸上的對齊方式。

.container {
  display: flex;
  align-items: flex-start;
}

.special-item {
  align-self: flex-end; /* 這個項目靠下對齊 */
  align-self: center; /* 這個項目置中 */
  align-self: stretch; /* 這個項目拉伸 */
  align-self: auto; /* 使用容器的 align-items（預設） */
}

實用範例

等分欄位

.container {
  display: flex;
}

.column {
  flex: 1; /* 每個欄位等分 */
}

固定 + 彈性

.layout {
  display: flex;
}

.sidebar {
  flex: 0 0 250px; /* 固定 250px，不伸縮 */
}

.main {
  flex: 1; /* 佔據剩餘空間 */
}

最小寬度限制

.card {
  flex: 1 1 300px; /* 基礎 300px，可伸縮 */
  min-width: 250px; /* 最小不能小於 250px */
}

輸入框 + 按鈕

.search-box {
  display: flex;
}

.search-input {
  flex: 1; /* 輸入框佔據剩餘空間 */
}

.search-button {
  flex: none; /* 按鈕不伸縮 */
}

垂直佈局中推到底部

.card {
  display: flex;
  flex-direction: column;
}

.card-content {
  flex: 1; /* 內容區域擴展 */
}

.card-footer {
  flex: none; /* 頁腳固定大小 */
}

重新排序

.mobile-menu {
  order: -1; /* 在行動版排到最前面 */
}

@media (min-width: 768px) {
  .mobile-menu {
    order: 0; /* 桌面版恢復原本順序 */
  }
}

單一項目置中

.container {
  display: flex;
  align-items: flex-start;
}

.centered-item {
  align-self: center;
}

常見模式