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

align-content คืออะไร?

คุณสมบัติ align-content ควบคุมการจัดเรียง Flex Lines (บรรทัดของ items) บน Cross Axis เมื่อมีหลายบรรทัด (multi-line flex container) ทำงานร่วมกับ flex-wrap: wrap

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

• display: flex หรือ inline-flex
• flex-wrap: wrap หรือ wrap-reverse
• คอนเทนเนอร์มีขนาด Cross Axis มากกว่าความสูง/กว้างรวมของ items

ตัวอย่าง: align-content: space-between

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

ค่าทั้ง 7 ค่า และการกระจายพื้นที่

ภาพเปรียบเทียบ (Row direction, Cross Axis = Vertical)

Container height: 300px, 3 lines (each 50px) = 150px used, 150px free

flex-start (default)        center                    space-between
┌──────────────┐            ┌──────────────┐          ┌──────────────┐
│ ▓▓ ▓▓ ▓▓     │            │              │          │ ▓▓ ▓▓ ▓▓     │  ← Line 1
│ ▓▓ ▓▓ ▓▓     │            │ ▓▓ ▓▓ ▓▓     │          │              │
│ ▓▓ ▓▓        │            │ ▓▓ ▓▓ ▓▓     │          │ ▓▓ ▓▓ ▓▓     │  ← Line 2
│              │            │ ▓▓ ▓▓        │          │              │
│   (empty)    │            │              │          │ ▓▓ ▓▓        │  ← Line 3
│   (empty)    │            │   (empty)    │          │              │
└──────────────┘            └──────────────┘          └──────────────┘

space-around                space-evenly              stretch
┌──────────────┐            ┌──────────────┐          ┌──────────────┐
│   (25px)     │            │   (30px)     │          │ ▓▓▓▓ ▓▓▓▓    │  ← Line 1 stretched
│ ▓▓ ▓▓ ▓▓     │            │ ▓▓ ▓▓ ▓▓     │          │ ▓▓▓▓ ▓▓▓▓    │  ← Line 2 stretched
│   (50px)     │            │   (30px)     │          │ ▓▓▓▓ ▓▓      │  ← Line 3 stretched
│ ▓▓ ▓▓ ▓▓     │            │ ▓▓ ▓▓ ▓▓     │          │              │
│   (50px)     │            │   (30px)     │          │              │
│ ▓▓ ▓▓        │            │ ▓▓ ▓▓        │          │              │
│   (25px)     │            │   (30px)     │          │              │
└──────────────┘            └──────────────┘          └──────────────┘

align-content vs align-items

คำแนะนำ

• จำกัดความสูงของ container (height, max-height, min-height) เพื่อให้ align-content ทำงานชัดเจน
• ใช้ space-around หรือ space-evenly สำหรับ Card grid ที่ต้องการ padding รอบๆ
• ใช้ stretch (default) เมื่อต้องการให้ทุกบรรทัดสูงเท่ากัน
• ถ้ามีแค่บรรทัดเดียว ให้ใช้ align-items แทน