การจัด Flex Lines ให้อยู่จุดเริ่มต้นด้วย align-content: flex-start

คุณสมบัติ align-content ควบคุมการจัดวาง flex lines (หลายแถว) ตาม cross axis เมื่อมี flex-wrap: wrap ค่า flex-start จะชิด flex lines ไปที่จุดเริ่มต้นของ cross axis

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      height: 300px;
      background-color: blue;
      align-content: flex-start;
      flex-wrap: wrap;
    }
    .mycontainer > div {
      background-color: orange;
      text-align: center;
      line-height: 60px;
      font-size: 30px;
      width: 100px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <h1>Queue</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-end: ชิดจุดสิ้นสุด cross axis
• center: กึ่งกลาง cross axis
• space-between: กระจายเท่าๆ กัน ชิดปลายทั้งสองข้าง
• space-around: กระจายเท่าๆ กัน มีระยะห่างรอบๆ line
• space-evenly: กระจายเท่าๆ กัน ระยะห่างเท่ากันทุกช่อง
• stretch (default): ยืด flex lines ให้เต็ม cross axis

เงื่อนไข: align-content ทำงานก็ต่อเมื่อมี flex-wrap: wrap (หรือ wrap-reverse) และมี flex lines หลายบรรทัด