เปิดใช้งานการห่อหุ้ม Flex Items ด้วย CSS3 (Flex-wrap)

Flex-wrap: ให้ Flex Items ขึ้นบรรทัดใหม่เมื่อพื้นที่ไม่พอ

ค่า default ของ flex container คือ flex-wrap: nowrap (บีบอัดอยู่บรรทัดเดียว) ตั้งค่า flex-wrap: wrap เพื่อให้ items ขึ้นบรรทัดใหม่เมื่อกว้างเกิน container

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .container {
      height: 300px; display: flex; width: 300px;
      border: 2px solid red; flex-wrap: wrap; /* จุดสำคัญ */
    }
    div { width: 150px; height: 100px; color: white; text-align: center; font-size: 20px; }
    .first { background-color: rgb(55, 0, 255); }
    .second { background-color: red; }
    .third { background-color: rgb(140, 0, 255); }
  </style>
</head>
<body>
  <h1>ตัวอย่าง Flex Wrap</h1>
  <div class="container">
    <div class="first">First Div</div>
    <div class="second">Second Div</div>
    <div class="third">Third Div</div>
  </div>
</body>
</html>

Flex-wrap Values

• nowrap (default) – บีบอัดทั้งหมดบรรทัดเดียว
• wrap – ขึ้นบรรทัดใหม่ซ้าย→ขวา (ล่าง→บน)
• wrap-reverse – ขึ้นบรรทัดใหม่ซ้าย→ขวา (บน→ล่าง)

ร่วมกับ Gap และ Alignment

.container {
  display: flex; flex-wrap: wrap;
  gap: 16px; /* ระยะห่าง item */
  justify-content: space-between; /* จัดแนวนอน */
  align-content: flex-start; /* จัดแนวตั้งหลายบรรทัด */
}

ใช้กับ Responsive Card Grid

.card-grid {
  display: flex; flex-wrap: wrap; gap: 24px;
}
.card { flex: 1 1 300px; } /* ขยายได้ หดได้ ขั้นต่ำ 300px */

การ์ดจะจัดตัวเองตามพื้นที่ – ไม่ต้อง media query