คุณสมบัติ align-content: space-between ใน CSS Flexbox

align-content: space-between คืออะไร?

ค่า space-between ของ align-content จัดเรียง Flex Lines (บรรทัดทั้งหมด) โดยวางบรรทัดแรกชิดจุดเริ่มต้น Cross Axis บรรทัดสุดท้ายชิดจุดสิ้นสุด และกระจายบรรทัดกลางอย่างเท่าเทียม ไม่มีพื้นที่ว่างที่ขอบ

เงื่อนไขการทำงาน

• display: flex + flex-wrap: wrap
• คอนเทนเนอร์มีขนาด Cross Axis มากกว่าความสูง/กว้างรวมของทุกบรรทัด
• ต้องมีอย่างน้อย 2 บรรทัด (single line ไม่มีผล)

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 200px;                    /* ความสูงจำกัด */
      background-color: #ffebee;
      align-content: space-between;     /* บรรทัดแรกชิดบน สุดท้ายชิดล่าง กระจายกลาง */
      flex-wrap: wrap;                  /* สำคัญ: ต้อง wrap */
      padding: 10px;
    }
    .mycontainer > div {
      background-color: #ffc107;
      color: #333;
      text-align: center;
      line-height: 60px;
      font-size: 24px;
      width: 100px;
      margin: 5px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>ตัวอย่าง align-content: space-between</h1>
  <p>บรรทัดแรกชิดบน บรรทัดสุดท้ายชิดล่าง บรรทัดกลางกระจายเท่าๆ กัน</p>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
    <div>Q5</div>
    <div>Q6</div>
    <div>Q7</div>
    <div>Q8</div>
  </div>
</body>
</html>

ภาพแสดงผล

Container: 200px height, 3 lines × 60px = 180px used, 20px free
3 lines → 2 gaps between lines = 20px / 2 = 10px per gap

align-content: space-between
┌────────────────────┐
│ ▓▓ ▓▓ ▓▓           │  ← Line 1: ชิดบน (0px from top)
├────────────────────┤
│     (10px gap)     │  ← พื้นที่ระหว่างบรรทัด = 10px
├────────────────────┤
│ ▓▓ ▓▓ ▓▓           │  ← Line 2
├────────────────────┤
│     (10px gap)     │  ← พื้นที่ระหว่างบรรทัด = 10px
├────────────────────┤
│ ▓▓ ▓▓              │  ← Line 3: ชิดล่าง (0px from bottom)
└────────────────────┘

เปรียบเทียบ: space-between vs space-around vs space-evenly

การใช้งานจริง: Sticky Header + Footer Layout

.page-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* ใช้ align-content บน column direction = จัดแนวนอน */
  /* แต่สำหรับ full page layout มักใช้ justify-content */
}

.page-layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* Header ชิดบน, Footer ชิดล่าง, Content กระจายกลาง */
  min-height: 100vh;
}

.header { flex: 0 0 auto; }
.main { flex: 1 0 auto; }
.footer { flex: 0 0 auto; }

การใช้งานจริง: Vertical Navigation

.vertical-nav {
  display: flex;
  flex-direction: column;
  height: 100vh;               /* Full viewport height */
  align-content: space-between; /* กลุ่มเมนูชิดบน, User info ชิดล่าง */
  padding: 20px;
  background: #f8f9fa;
}

.nav-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #dee2e6;
  padding-top: 20px;
}

คำแนะนำ

• ใช้ space-between เมื่อต้องการให้กลุ่มแรกและกลุ่มสุดท้าย "ชิดขอบ" แน่นอน
• ต้องมีอย่างน้อย 2 บรรทัด (flex lines) ถึงจะเห็นผลชัดเจน
• ร่วมกับ justify-content สำหรับการจัด 2 แกนพร้อมกัน
• สำหรับ column direction: ใช้ justify-content: space-between แทน (เพราะ main axis = vertical)