คุณสมบัติ flexWrap ของ HTML DOM Style: การห่อหุ้ม Flex Items

คุณสมบัติ flexWrap ใช้กำหนดว่า Flex Items จะถูกบังคับให้อยู่ในบรรทัดเดียว หรือสามารถห่อหุ้มไปบรรทัดใหม่ได้ (ใน Flex Container)

ไวยากรณ์ (Syntax)

object.style.flexWrap = "nowrap|wrap|wrap-reverse|initial|inherit"

ค่าที่รองรับ

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

<!DOCTYPE html>
<html>
<head>
<style>
  #demo {
    margin: auto;
    width: 180px;
    height: 120px;
    box-shadow: 0 0 0 5px brown;
    display: flex;
    flex-wrap: wrap;
  }
  #demo div {
    padding: 0;
    width: 50px;
    height: 50px;
    border: 5px solid;
    border-radius: 15%;
  }
  #demo div:nth-child(even) { border-color: black; }
  #demo div:nth-child(odd) { border-color: red; }
</style>
<script>
  function changeFlexWrap() {
    document.getElementById("demo").style.flexWrap = "nowrap";
    document.getElementById("Sample").innerHTML = "Flex wrap ตั้งเป็น nowrap แล้ว (ไม่ห่อหุ้ม)";
  }
</script>
</head>
<body>
<div id="demo">
  <div></div><div></div><div></div><div></div><div></div>
</div>
<p>คลิกปุ่มเพื่อเปลี่ยน flex wrap property ของ container div ด้านบน</p>
<button onclick="changeFlexWrap()">เปลี่ยน Flex Wrap</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน (wrap): 5 กล่องจัดเป็น 2 แถว (3+2) ใน container กว้าง 180px
หลัง (nowrap): 5 กล่องบีบอยู่ใน 1 แถว อาจล้นออกนอก container

ภาพแสดงพฤติกรรม

flex-wrap: nowrap (default)          flex-wrap: wrap
┌─────────────────────────────┐      ┌─────────────┐
│ █ █ █ █ █  (overflow)       │      │ █ █ █       │
└─────────────────────────────┘      │ █ █         │
                                     └─────────────┘

flex-wrap: wrap-reverse
┌─────────────┐
│ █ █         │  ← แถวที่ 2 (ล่างสุด)
│ █ █ █       │  ← แถวที่ 1 (บนสุด)
└─────────────┘

คุณสมบัติ Flexbox ที่เกี่ยวข้อง

Responsive Pattern

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 300px;  /* grow shrink basis - ยืดหยุ่นตามพื้นที่ */
}

การรองรับเบราว์เซอร์

รองรับเต็มรูปแบบ Chrome 29+, Firefox 28+, Safari 9+, Edge 12+, IE11 (prefix -ms-)