ปรับพฤติกรรม flex-wrap ด้วย align-content ใน CSS

ความสัมพันธ์ระหว่าง flex-wrap และ align-content

flex-wrap ควบคุมว่า items จะขึ้นบรรทัดใหม่หรือไม่ ส่วน align-content ควบคุมว่า บรรทัดทั้งหมด (flex lines) จะจัดตัวอย่างไรภายในคอนเทนเนอร์เมื่อมีพื้นที่ว่างบน Cross Axis

เงื่อนไข: align-content ทำงานก็ต่อเมื่อ

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #fff3e0;
      align-content: space-between;  /* บรรทัดแรกชิดบน สุดท้ายชิดล่าง กระจายกลาง */
      height: 250px;                 /* ต้องมีความสูงจำกัด */
      width: 600px;
      flex-wrap: wrap;               /* สำคัญ: ต้อง wrap */
      padding: 10px;
    }
    .mycontainer > div {
      background-color: white;
      border: 2px solid #ff9800;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      width: 100px;
      margin: 5px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>ตัวอย่าง align-content: space-between กับ flex-wrap</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>

ภาพแสดงผลของ align-content ต่างๆ

flex-wrap: wrap + height: 300px (items รวมสูง ~180px)

align-content: flex-start (default)
┌────────────────────┐
│ ▓▓ ▓▓ ▓▓           │  ← บรรทัด 1
│ ▓▓ ▓▓ ▓▓           │  ← บรรทัด 2
│ ▓▓ ▓▓              │  ← บรรทัด 3
│                    │  ← พื้นที่ว่างมากด้านล่าง
└────────────────────┘

align-content: center
┌────────────────────┐
│                    │  ← พื้นที่ว่างด้านบน
│ ▓▓ ▓▓ ▓▓           │
│ ▓▓ ▓▓ ▓▓           │
│ ▓▓ ▓▓              │
│                    │  ← พื้นที่ว่างด้านล่าง
└────────────────────┘

align-content: space-between
┌────────────────────┐
│ ▓▓ ▓▓ ▓▓           │  ← ชิดบน
│                    │
│ ▓▓ ▓▓ ▓▓           │  ← กระจายกลาง
│                    │
│ ▓▓ ▓▓              │  ← ชิดล่าง
└────────────────────┘

align-content: space-around
┌────────────────────┐
│                    │  ← พื้นที่ครึ่งหน่วย
│ ▓▓ ▓▓ ▓▓           │
│                    │  ← พื้นที่ 1 หน่วย
│ ▓▓ ▓▓ ▓▓           │
│                    │  ← พื้นที่ 1 หน่วย
│ ▓▓ ▓▓              │
│                    │  ← พื้นที่ครึ่งหน่วย
└────────────────────┘

สรุปค่า align-content ทั้ง 7 ค่า

ค่า	พฤติกรรม	เหมาะสำหรับ
flex-start	บรรทัดชิดจุดเริ่มต้น	เนื้อหาไม่ต้องการพื้นที่ว่าง
flex-end	บรรทัดชิดจุดสิ้นสุด	Align เนื้อหาล่าง
center	บรรทัดอยู่กึ่งกลาง	Card grid, Gallery
space-between	บรรทัดแรกชิดบน สุดท้ายชิดล่าง	กระจายเนื้อหาเต็มพื้นที่
space-around	พื้นที่รอบบรรทัดเท่าๆ กัน	Card grid กับ padding
space-evenly	พื้นที่ทุกช่องเท่าๆ กัน	Grid สม่ำเสมอ
stretch	ยืดบรรทัดเต็มพื้นที่ (default)	Equal height rows

คำแนะนำ

จำไว้: align-content ควบคุม "บรรทัด" (lines) ส่วน align-items ควบคุม "items ภายในบรรทัด"
ถ้าไม่มี flex-wrap หรือมีแค่บรรทัดเดียว align-content จะไม่มีผล
ใช้ flex-flow: row wrap แทนการเขียนแยก 2 บรรทัด