คุณสมบัติ flex-wrap ใน CSS Flexbox

flex-wrap คืออะไร?

คุณสมบัติ flex-wrap ควบคุมว่า flex items จะ ขึ้นบรรทัดใหม่ (wrap) หรืออยู่บรรทัดเดียว (nowrap) เมื่อพื้นที่ไม่พอ

ค่าที่ใช้ได้

ตัวอย่าง: flex-wrap: wrap

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #fff3e0;
      flex-wrap: wrap;              /* ให้ items ขึ้นบรรทัดใหม่ */
      padding: 10px;
      gap: 10px;                    /* ระยะห่างระหว่าง items */
    }
    .mycontainer > div {
      background-color: white;
      border: 2px solid #ff9800;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      width: 120px;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  </style>
</head>
</head>
<body>
  <h1>ตัวอย่าง flex-wrap: wrap</h1>
  <p>ลองปรับขนาดหน้าต่างเบราวเซอร์เพื่อดู items ขึ้นบรรทัดใหม่</p>
  <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>Q9</div>
  </div>
</body>
</html>

ตัวอย่าง: flex-wrap: nowrap (ค่าเริ่มต้น)

.nowrap-container {
  display: flex;
  flex-wrap: nowrap;   /* items จะบีบตัวเล็กลงมา หรือล้นออกนอก */
  overflow-x: auto;    /* เพิ่ม scroll bar ถ้าล้น */
}

ตัวอย่าง: flex-wrap: wrap-reverse

.wrap-reverse-container {
  display: flex;
  flex-wrap: wrap-reverse;  /* บรรทัดใหม่จะอยู่ "ด้านบน" บรรทัดเก่า */
  height: 300px;            /* ต้องมีความสูงจำกัด */
}

ความสัมพันธ์กับ flex-direction

Shorthand: flex-flow

/* รวม flex-direction + flex-wrap ในบรรทัดเดียว */
flex-flow: row wrap;
flex-flow: column wrap-reverse;

คำแนะนำ

• ใช้ flex-wrap: wrap สำหรับ Responsive Design ส่วนใหญ่
• ร่วมกับ gap เพื่อระยะห่างที่สม่ำเสมอ
• ใช้ min-width บน items เพื่อควบคุมจุดที่จะ wrap