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

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

คุณสมบัติ align-content ควบคุมการจัดเรียงบน Cross Axis (แกนตั้งฉากกับ main axis) เมื่อมีหลายบรรทัด (multi-line flex container) ค่า space-around จะกระจายพื้นที่ว่าง รอบๆ แต่ละบรรทัด flex line อย่างเท่าเทียม

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

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 300px;                  /* สูงกว่าความสูงรวมของ items */
      background-color: #f0f0f0;
      align-content: space-around;    /* กระจายพื้นที่รอบบรรทัด */
      flex-wrap: wrap;                /* สำคัญ: ต้อง wrap */
    }
    .mycontainer > div {
      background-color: #4CAF50;
      color: white;
      text-align: center;
      line-height: 60px;
      font-size: 24px;
      width: 100px;
      margin: 5px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>ตัวอย่าง align-content: space-around</h1>
  <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>

การกระจายพื้นที่ (Visual Explanation)

┌─────────────────────────────────┐
│           พื้นที่ว่าง            │  ← space-around: ครึ่งหน่วยด้านบน
├──────────┬──────────┬──────────┤
│   Q1     │   Q2     │   Q3     │  ← บรรทัดที่ 1
├──────────┼──────────┼──────────┤
│   Q4     │   Q5     │   Q6     │  ← บรรทัดที่ 2
├──────────┼──────────┼──────────┤
│   Q7     │   Q8     │          │  ← บรรทัดที่ 3
├──────────┴──────────┴──────────┤
│           พื้นที่ว่าง            │  ← space-around: ครึ่งหน่วยด้านล่าง
└─────────────────────────────────┘
พื้นที่ระหว่างบรรทัด = 1 หน่วยเต็ม
พื้นที่ขอบบน/ล่าง = 0.5 หน่วย

เปรียบเทียบค่า align-content

คำแนะนำ

• ใช้ space-around เมื่อต้องการ "ห้องว่าง" รอบๆ เนื้อหา
• จดจำ: space-between = ไม่มีพื้นที่ขอบ, space-around = มีพื้นที่ขอบครึ่งหน่วย
• ถ้ามีบรรทัดเดียว align-content จะไม่มีผล ให้ใช้ align-items แทน