คุณสมบัติ flex-wrap

คุณสมบัติ flex-wrap กำหนดการจัดวางบล็อกหลายบรรทัด ตามแกนหลัก ใช้กับองค์ประกอบแม่สำหรับ บล็อกแบบ flex เป็นส่วนหนึ่งของคุณสมบัติแบบย่อ flex-flow

ไวยากรณ์

cssเซเล็กเตอร์ {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

ค่า

ค่าเริ่มต้น: nowrap

ตัวอย่าง ค่า wrap

ตอนนี้บล็อกไม่พอดีกับคอนเทนเนอร์ และจะเรียงเป็นหลายบรรทัด:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง ค่า wrap-reverse

และตอนนี้ลำดับจะเปลี่ยนเป็น ย้อนกลับ (ดูตัวเลขภายในบล็อก):

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง ค่า nowrap

ตอนนี้บล็อกจะอยู่ในโหมดบรรทัดเดียว (ค่าเริ่มต้น) ในกรณีนี้ค่า ความกว้าง width สำหรับบล็อกจะถูกละเว้น หากมันทำให้บล็อกไม่พอดีกับคอนเทนเนอร์แม่ โปรดสังเกตว่าบล็อกพอดี กับคอนเทนเนอร์แม่ แต่ความกว้างจริงของมันไม่ใช่ 100px ตามที่กำหนดไว้ แต่แคบกว่า:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง ค่า nowrap

อย่างไรก็ตาม หากบล็อกพอดีกับความกว้าง ที่กำหนดให้ - คุณสมบัติ width จะไม่ ถูกละเว้น ลองลดจำนวนบล็อก ให้พอดีทั้งหมด:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ดูเพิ่มเติม