คุณสมบัติ align-items: baseline ใน CSS Flexbox

align-items: baseline คืออะไร?

ค่า baseline ของ align-items จัดเรียง flex items ตาม Baseline ของข้อความบรรทัดแรก ทำให้ baseline ของข้อความในทุก item อยู่ในแนวเดียวกัน แม้ขนาดฟอนต์จะต่างกันก็ตาม

Baseline คืออะไร?

Baseline คือเส้นฐานที่ตัวอักษร "ยืน" อยู่ (ไม่รวมส่วนหางตัวอักษรเช่น g, j, p, q, y) การจัด baseline ทำให้ข้อความอ่านง่ายและดูเรียบร้อย

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 200px;
      background-color: #ffebee;
      align-items: baseline;      /* จัดตาม baseline ของข้อความ */
      padding: 20px;
      gap: 20px;
    }
    .mycontainer > div {
      background-color: #ff9800;
      color: white;
      text-align: center;
      padding: 20px 10px;
      font-size: 24px;
      width: 100px;
      border-radius: 4px;
    }
    /* Items มี font-size ต่างกัน แต่ baseline จะตรงกัน */
    .mycontainer > div:nth-child(2) { font-size: 32px; }
    .mycontainer > div:nth-child(3) { font-size: 16px; }
  </style>
</head>
<body>
  <h1>ตัวอย่าง align-items: baseline</h1>
  <p>Items มี font-size ต่างกัน (24px, 32px, 16px, 24px) แต่ baseline ตรงกัน</p>
  <div class="mycontainer">
    <div>Q1 (24px)</div>
    <div>Q2 (32px)</div>
    <div>Q3 (16px)</div>
    <div>Q4 (24px)</div>
  </div>
</body>
</html>

ภาพเปรียบเทียบ: baseline vs center vs stretch

align-items: baseline (font-size: 16, 32, 24, 16)
┌─────────────────────────────────────┐
│        ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │  ← Q2 (32px) สูงกว่า
│  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │  ← Q1 (24px)
│        ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │  ← Q3 (16px)
│  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │  ← Q4 (24px)
│  ─────────────────────────────────  │  ← Baseline line (ตรงกันทุกตัว)
└─────────────────────────────────────┘

align-items: center
┌─────────────────────────────────────┐
│        ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │
│     ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   │  ← จัดกึ่งกลางแนวตั้ง
│        ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  │
│     ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   │
└─────────────────────────────────────┘

การใช้งานจริง: Form Label + Input Alignment

.form-row {
  display: flex;
  align-items: baseline;  /* Label และ Input baseline ตรงกัน */
  gap: 16px;
  margin-bottom: 16px;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.form-input {
  font-size: 16px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  flex: 1;
}

/* Baseline ของ label (14px) และ input (16px) จะตรงกัน */

การใช้งานจริง: Mixed Content Cards

.card-row {
  display: flex;
  align-items: baseline;  /* Title และ Meta baseline ตรงกัน */
  gap: 16px;
  flex-wrap: wrap;
}

.card-title {
  font-size: 24px;
  font-weight: 700;
  flex: 1;
  min-width: 200px;
}

.card-meta {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

/* Title และ Meta จะจัด baseline ตรงกัน แม้ font-size ต่างกัน */

ข้อควรระวัง

• Baseline คำนวณจาก บรรทัดแรกของข้อความ ใน item
• ถ้า item ไม่มีข้อความ (แค่รูปภาพ) baseline จะอยู่ที่ bottom margin edge
• ใช้ align-self บน item เดียวที่ต้องการจัดต่างจากกลุ่ม

คำแนะนำ

• ใช้ baseline เมื่อมีข้อความขนาดต่างกันที่ต้องการให้อ่านง่าย (Forms, Metadata, Mixed content)
• หลีกเลี่ยงใช้กับ items ที่ไม่มีข้อความ (images only) - ผลลัพธ์อาจไม่คาดคิด
• ร่วมกับ gap สำหรับระยะห่างที่สม่ำเสมอ