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;
}

常見模式