CSS 等高欄位 (Equal Height Columns)

等高欄位是指讓多個並排的欄位保持相同高度，即使內容量不同。這在卡片佈局、表格式資訊展示中非常常見。

Flexbox 方式

Flexbox 預設就會讓子元素等高（align-items: stretch）：

.row {
  display: flex;
}

.column {
  flex: 1;
  padding: 20px;
  background: #f5f5f5;
}

<div class="row">
  <div class="column">短內容</div>
  <div class="column">較長的內容較長的內容較長的內容較長的內容</div>
  <div class="column">中等內容中等內容</div>
</div>

所有 .column 會自動等高。

加入間距

.row {
  display: flex;
  gap: 20px;
}

.column {
  flex: 1;
}

Grid 方式

Grid 也會自動讓同一行的項目等高：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.item {
  padding: 20px;
  background: #f5f5f5;
}

實際應用

等高卡片

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

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-body {
  flex: 1;    /* 讓內容區域填滿剩餘空間 */
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.card-title {
  margin: 0 0 12px;
}

.card-text {
  flex: 1;    /* 讓文字區域伸縮 */
  color: #666;
}

.card-button {
  margin-top: 16px;
  align-self: flex-start;
}

這樣即使每張卡片的文字長度不同，按鈕都會對齊在卡片底部。

特色區塊

.features {
  display: flex;
  gap: 32px;
}

.feature {
  flex: 1;
  text-align: center;
  padding: 32px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.feature-title {
  margin: 0 0 12px;
}

.feature-text {
  color: #666;
  line-height: 1.6;
}

價格方案

.pricing {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.pricing-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
}

.pricing-header {
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid #e0e0e0;
}

.pricing-price {
  font-size: 48px;
  font-weight: bold;
}

.pricing-features {
  flex: 1;
  padding: 24px 0;
}

.pricing-button {
  margin-top: auto;
}

表格式比較

.comparison {
  display: flex;
}

.comparison-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.comparison-header {
  padding: 24px;
  background: #007bff;
  color: white;
  text-align: center;
}

.comparison-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}

響應式等高

在小螢幕上變成堆疊，大螢幕等高排列：

.row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .row {
    flex-direction: row;
  }
  
  .column {
    flex: 1;
  }
}

舊方法（不推薦）

display: table

.row {
  display: table;
  width: 100%;
}

.column {
  display: table-cell;
  padding: 20px;
  vertical-align: top;
}

負 margin 技巧

.row {
  overflow: hidden;
}

.column {
  float: left;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

這些舊方法現在已經不需要使用，Flexbox 和 Grid 是更好的選擇。

注意事項

align-items 的影響

如果設定 align-items 為其他值，等高效果會失效：

/* 會等高 */
.row {
  display: flex;
  align-items: stretch;    /* 預設值 */
}

/* 不會等高 */
.row {
  display: flex;
  align-items: flex-start;
}

巢狀 Flex 容器

要讓卡片內的按鈕對齊底部，卡片本身也要是 flex 容器：

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

.card-body {
  flex: 1;
}